bootstrap 网格不均匀列

Question

我正在使用 bootstrap 4 网格。我有 3 列。我希望第一列和第三列为 col-8，第二列为 col-4。基本上第二列是一个侧边栏，我想在小屏幕上放在第一列和第三列之间。不幸的是，我的第二列具有动态高度并且很长，因此第一列被分配了第二列的高度，第三列从第二列的底部开始，第一列和第三列之间有很多 space 。我希望第 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

我唯一能做到这一点的方法是删除行 class 并在下面的每个示例中添加浮点数

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

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/

Answer 3

Bootstrap 5（2021 年更新）

Bootstrap 5 还对网格使用 flexbox rows/columns。因此响应式地使用 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:block 而不是 display:flex sm 及以上。这允许 float-* 在列上工作并且第二列被拉到右边。

Answer 4

您可以在列中写入行列

试试这个

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

bootstrap 网格不均匀列

bootstrap grid uneven columns

css

flexbox

twitter-bootstrap

bootstrap-4

bootstrap-5

HTML

结果