引导程序4网格不均匀列 [英] bootstrap 4 grid uneven columns

问题描述

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

i am using bootstrap 4 grid. i have 3 columns. i want first and third column to be col-8 and second column to be col-4. basically second column is a sidebar which i want to fall between first and third column on small screens. unfortunately my second column has dynamic height and is very long so the first column gets assigned height of second column leaving the third column start from the bottom of second column with lots of space between first and third. i would like column 3 to fall right under the text of first column.

我希望这是有道理的.

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

This is the image of what I'm trying to do:

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

推荐答案

基本上，这已经 Bootstrap 4是flexbox，因此所有列的高度都与最高列相同.通常，您可以通过嵌套列来解决此问题，但是您将无法获得所需的列顺序.解决方法是使用这样的浮点数:

Bootstrap 4 is flexbox, and therefore all of the columns become the same height as the tallest column. Usually, you can workaround this by nesting the columns, but then you won't get the desired column order. The workaround is to use floats like this:

<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 (边界为可视化而添加)

Demo: https://www.codeply.com/go/0bUA8clMdI (borders added for visualization)

这可以使用row中的d-sm-block使行display:block代替 sm及更高版本上的display:flex.这样，float-*即可在列上工作，而第二列将被拉到右侧.

This works using the d-sm-block in the row to make the row display:block instead of display:flex on sm and up. This allows the float-* to work on the columns and 2nd column gets pulled to the right.

这篇关于引导程序4网格不均匀列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！