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

查看：41
本文介绍了引导网格不均匀列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我希望这是有道理的.

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

<div class="row"><div class="col-sm-8"><div>三列之一</div><div>三列之一</div>
<div class="col-sm-4"><div>三列中的两列</div><div>三列中的两列</div><div>三列中的两列</div><div>三列中的两列</div><div>三列中的两列</div><div>三列中的两列</div>

<div class="col-sm-8"><div>三列中的三列</div><div>三列中的三列</div><div>三列中的三列</div>

解决方案

Bootstrap 5(2021 年更新)

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

引导程序 4(原始答案)

基本上这已经之前已经回答过.

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

<div class="row d-sm-block"><div class="col-sm-8 float-left"><div>三列之一</div><div>三列之一</div>
<div class="col-sm-4 float-right"><div>三列中的两列</div><div>三列中的两列</div><div>三列中的两列</div><div>三列中的两列</div><div>三列中的两列</div><div>三列中的两列</div>

<div class="col-sm-8 float-left"><div>三列中的三列</div><div>三列中的三列</div><div>三列中的三列</div>

演示:https://codeply.com/go/0bUA8clMdI(为可视化添加了边框)

这使用 row 中的 d-sm-block 使行 display:block 而不是display:flex 在 sm 及以上.这允许 float-* 在列上工作，并且第二列被拉到右边.

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.

i hope that makes sense.

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 5 (update 2021)

Bootstrap 5 also uses flexbox for grid rows/columns. Therefore using d-block responsively will still work, however float-left has been replaced with float-start.

Bootstrap 4 (original answer)

Basically this has already been answered before.

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>

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

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.

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆