Bootstrap栅格系统中的列不均匀

Question

我正在使用Bootstrap 4网格系统。我有三列。我希望第一列和第三列是col-8，第二列是col-4。基本上，第二列是侧边栏，我希望在小屏幕上它能够落在第一列和第三列之间。不幸的是，我的第二列具有动态高度，并且非常长，因此第一列被分配了第二列的高度，留下了很多空间，使得第三列从第二列底部开始。我希望第三列可以直接排在第一列的文本下面。

我希望这样说得清楚。以下是我想要实现的效果图：

<div class="container">
    <div class="row ">
      <div class="col-sm-8 ">
        <div>One of three columns</div>
        <div>One of three columns</div>
      </div>
      <div class="col-sm-4 ">
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
      </div>
      <div class="col-sm-8">
        <div>three of three columns</div>
        <div>three of three columns</div>
        <div>three of three columns</div>
      </div>
    </div>
  </div>

- adam

Answer 1

Bootstrap 5 (2021更新)

Bootstrap 5同样使用flexbox来布局行和列。因此，使用d-block进行响应式布局仍然有效，但是float-left已被替换为float-start。

Bootstrap 4 (原始答案)

基本上这个问题已经在之前得到了解答。

Bootstrap 4采用flexbox布局，因此所有列的高度都与最高的列相同。通常情况下，可以通过嵌套列来解决这个问题，但是这样你就无法得到所需的列顺序。解决方法是像这样使用浮动：

<div class="container">
    <div class="row d-sm-block">
      <div class="col-sm-8 float-left">
        <div>One of three columns</div>
        <div>One of three columns</div>
      </div>
      <div class="col-sm-4 float-right">
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
      </div>
      <div class="col-sm-8 float-left">
        <div>three of three columns</div>
        <div>three of three columns</div>
        <div>three of three columns</div>
      </div>
    </div>
</div>

演示：https://codeply.com/go/0bUA8clMdI（为了可视化添加了边框）

这是通过在row中使用d-sm-block将行的display属性从display:flex更改为display:block，从而使float-*在列上起作用，并将第二列向右拉。

- Zim

Answer 2

如果您不介意复制侧边栏，可以将侧边栏副本放置在第1列和第3列之间，并在小屏幕上显示它，同时隐藏右侧的另一个侧边栏。在大屏幕上，您可以相反地将侧边栏显示在右侧，同时隐藏第1列和第3列之间的副本。HTML标签请保留。

<div class="container">
  <div class="row">
    <div class="col-sm-8">
        <section class="mb-3">
            column 1
        </section>
        <section class="mb-3 d-sm-none">
            copy of column 2
        </section>
        <section class="mb-3">
            column 3
        </section>
    </div>
    <div class="col-sm-4">
        <section class="mb-3 d-none d-sm-block">
            column 2
        </section>
    </div>
  </div>
</div>

结果

在小屏幕上：

在大屏幕上：

fiddle: http://jsfiddle.net/aq9Laaew/243819/

- David Liang

Answer 3

你可以在列中编写行

试一下

<div class="container border border-primary">
<div class="row border border-primary">
    <div class="border border-primary col-lg-8 col-md-12 col-sm-12" style="height:200px">
        <div class="row border border-secondary">
            <div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
                <!--content for 1-->
            </div>
            <div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
                <!--content for 2-->
            </div>
        </div>
    </div>
    <div class="border border-primary col-lg-4 col-md-6 col-sm-6" style="height:200px">
        <!-content for 3-->
    </div>
</div> 

- vidy

Answer 4

我能想到的唯一实现方法是删除行类并根据以下示例添加浮动

<div class="container">
            <div class=" ">
                <div class="col-md-8 grey  float-left">
                            <div>main content</div>
                            <div>main content</div>
                        </div>
                    </div>
                    <div class="col-md-4  blue float-right ">
                                <div>side content</div>
                                <div>side content</div>
                                <div>side content</div>
                                <div>side content</div>
                                <div>side content</div>
                        </div>

                    <div class="col-md-8 pink float-left">
                            <div>main2 content</div>
                            <div>main2 content</div>
                            <div>main2 content</div>
                    </div>
            </div>
        </div>

- adam