Question

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

我希望这是有道理的。

这是我要执行的操作的图像：

enter image description here

<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

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

基本上，它已经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://www.codeply.com/go/0bUA8clMdI（添加了用于可视化的边界）

这可以通过使用d-sm-block中的row来使行display:block代替 display:flex上的sm及以上。这样一来，float-*就可以在列上使用，而第二列将被拉到右侧。

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>

Answer 4

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

FormData

引导程序4网格不均匀列

4 个答案:

HTML

结果