Question

实际上，我通过使用Bootstrap网格系统构建了一个具有一行类和两列的布局。

现在，我需要在该网格系统中添加另一个项目，但是由于它正在所有其他列下移动，因此我无法将其正确放置在布局中。如您所见 screenshot

如您所见，我试图添加的第三列位于其他所有列的下方，而我将其放置在红色矩形位置

布局如下：

<div class="container-fluid">
   <div class="row">
      <div class="col-md-4 mb-4 mt-1"></div>
      <div class="col-md-8 mb-4 mt-1"></div>
   </div>
</div>

我试图添加类似内容以放入第三列，但结果如上所述。

<div class="container-fluid">
   <div class="row">
      <div class="col-md-4 mb-4 mt-1"></div>
      <div class="col-md-8 mb-4 mt-1"></div>
      <div class="col align-self-start"><div>
   </div>
</div>

Answer 1

您应该使用以下方法

<div class="container-fluid">
    <div class="row">
        <!-- There will be column with 2 right box  -->
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12 mb-4 mt-1">
                </div>
                <div class="col-md-12">
                    ITEM UNDER 1ST BOX
                </div>
            </div>
        </div>
        <!-- This will be your larger left box -->
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-12 mt-1">
                </div>
            </div>
        </div>
    </div>
</div>

如何在网格系统中正确放置项目？

1 个答案: