引导网格不均匀的列

Question

我正在使用 bootstrap 4 网格。我有 3 列。我希望第一列和第三列是 col-8，第二列是 col-4。基本上第二列是一个侧边栏，我想在小屏幕上位于第一列和第三列之间。不幸的是，我的第二列具有动态高度并且很长，因此第一列被分配了第二列的高度，而第三列从第二列的底部开始，第一列和第三列之间有很多空间。我希望第 3 列正好位于第一列的文本下方。

我希望这是有道理的。

这是我正在尝试做的图像：

<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>

Answer 1

引导程序 5（2021 年更新）

Bootstrap 5 还为网格行/列使用 flexbox。因此，响应式使用 d-block 仍然有效，但 float-left 已被 float-start 替换。

Bootstrap 4（原始答案）

基本上这已经been answered before了。

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:block 行而不是 display:flex sm 及以上。这允许float-* 在列上工作，第二列被拉到右边。

Answer 2

可以在列内写行列

试试这个

<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> 

Answer 3

如果您不介意复制侧边栏，可以将侧边栏副本放在第 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>

结果

在小屏幕上：

在大屏幕上：

小提琴： http://jsfiddle.net/aq9Laaew/243819/

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>