Bootstrap 创建三个内联块，在不影响其他块的情况下，自由地将元素放置在它们内部

tzcvj98z 于 12个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(92)

我试图创建三个块设置的高度和宽度，在顶部/底部对齐，也放置在他们夫妇的元素。我的问题是，每当我把额外的DIV到一个元素是每三个元素内的DIV的数量是不一样的，它将显示与“失踪”元素1行低的元素。请参见下面的代码示例：

<div class="container">
    <div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
        <div>thing1</div>
        <div>XXX</div>
    </div>
    <div class="d-inline-block border border-success" style="width:16%;height:15vh;">
        <div>thing2</div>
    </div>
    <div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
        <div>thing3</div>
        <div>XXX</div>
    </div>
</div>

我用的是Bootstrap 5.0。上面的代码在渲染时将显示“thing 2”框没有与其他框对齐，被推低。
对这种行为有什么想法吗？
我尝试过将元素 Package 在额外的div中以设置最大高度等，我也尝试过使用position-relative/absolute，但我就是不明白一个盒子对另一个盒子的影响。

twitter-bootstrap

来源：https://stackoverflow.com/questions/77112407/create-three-inline-blocks-and-freely-place-elements-inside-them-without-affecti

2条答案

按热度按时间

acruukt91#

如果您继续使用display: inline-block，请添加vertical-align: top
下面是示例snippte：

.d-inline-block {
    vertical-align: top;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
        <div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
            <div>thing1</div>
            <div>XXX</div>
        </div>
        <div class="d-inline-block border border-success" style="width:16%;height:15vh;">
            <div>thing2</div>
        </div>
        <div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
            <div>thing3</div>
            <div>XXX</div>
        </div>
    </div>

赞(0）回复(0）举报 12个月前

7hiiyaii2#

由于“d-inline-block”而出现问题。解决方案是使用网格系统，下面的代码有帮助：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="block border border-primary">
        <div>thing1</div>
        <div>XXX</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="block border border-success">
        <div>thing2</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="block border border-primary">
        <div>thing3</div>
        <div>XXX</div>
      </div>
    </div>
  </div>
</div>

<style>
  .block {
    height: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
</style>

赞(0）回复(0）举报 12个月前

我来回答

Bootstrap 创建三个内联块，在不影响其他块的情况下，自由地将元素放置在它们内部

2条答案

相关问题

热门标签

最新问答