4

我正在使用引导 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>
4

4 回答 4

4

引导程序 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 （为可视化添加了边框）

这可以使用d-sm-blockinrow来制作行display:block而不是 display:flexonsm和 up。这允许在float-*列上工作，第二列被拉到右边。

于 2018-10-08T18:16:54.487 回答
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>

结果

在小屏幕上：

在此处输入图像描述

在更大的屏幕上：

在此处输入图像描述

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

于 2018-10-05T19:28:03.003 回答
1

您可以在列内写入行列

尝试这个

<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>
于 2018-11-30T12:00:19.587 回答
0

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

<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>
于 2018-10-05T16:14:50.443 回答