首页 文章

如何使用引导程序调整每行的列数

提问于
浏览 次
7

使用Bootstrap v4alpha，我正在尝试在网格下面布置带有 Headers 的24张图片 . 让我们用一个 Headers 来调用一张图片 .

1）如果使用带有对齐顶部和左侧的<table>标签，我希望瓷砖垂直和水平对齐 . 我的照片尺寸相同，但字幕长度不一 .

2）列数根据屏幕大小进行调整 . 在小屏幕上，我们将有2列和12行 . 在中等屏幕上3列4行 . 在大屏幕上4列和3行 .

我尝试了Cards Columns，这几乎是我需要的，除了砖石外观 . 我希望它们也按行排列 .

我也尝试了使用col-sm-6，col-md-4和col-lg-3的Grid Options但是问题在于我需要在标签<div class = "row">中包装固定数量的图块 .

在以前版本的Bootstrap中也存在此问题，但如果有针对v4的特定解决方案，我也想知道 .

css twitter-bootstrap responsive-design multiple-columns

1 回答

  • 12

    你可以用一个 <div class="row">...</div> 包装所有 .col-*-* . 您的内容将在需要时包装 .

    现在，至于你的另一个问题：你不再适合（例如你有 .col-*-11 然后 .col-*-2 ）它会自动进入下一行，即使上一行不是100％已满 .

    另一个例子来自Bootstrap's documentation

    <div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

    这里 .col-4 将引入第10-13列，但由于只有12列，所以整个div进入下一行 .

    Bootstrap 4

    I made a fiddle向您展示，这将如何在Bootstrap 4中工作.v4的网格系统基于flexbox，在flexbox中，项目将增长以使用所有可用的垂直空间 . 这意味着在一行列中，每列将与最高列一样高 .

    这与Bootstrap 3有很大的不同，意味着无需补偿内容的不同高度 .

    Bootstrap 3

    我最初的答案基于Bootstrap 3并且存在一些差异，所以我会在这里保留原始答案（略微修改）以及任何需要它的人 .

    在Bootstrap 3中，您可以完全省略 .row 并使用 .container 作为所有 .col-*-* 的父级 .

    您可以查看this fiddle以查看使用 .row 与不使用 .row 来布局图像网格之间的区别 . 只需调整结果框的宽度，向下滚动即可查看连续3个图像时的差异 . 当然你也可以使用一个单独的 .row 将所有 .col 放入其中 .

    补偿不同的内容高度

    但是，由于Bootstrap 3使用浮点数而不是flexbox，这会引入一个问题，即如果列的高度不同，当您希望它从左侧开始时，下一列可能从上一列的最高元素的右侧开始的屏幕 . 因此，为了将元素推到所有先前元素之下，您需要清除这些浮点数 .

    Bootstrap 3为此提供了一个类，只要您想清除浮点数，就可以插入 <div class="clearfix"> . 此外，您将不得不隐藏屏幕大小的div，您不想清除浮动，您可以使用类 .hidden-* 来实现 .

    <div class="container">
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>

  <!-- on small devices the first row is full here, so we add a clearfix and hide it for medium and large sizes -->
  <div class="clearfix hidden-md hidden-lg"></div>

  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>

  <!-- on medium devices the first row is full here, so we add a clearfix and hide it for small and large sizes -->
  <div class="clearfix hidden-sm hidden-lg"></div>

  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
</div>

    再次，我做了一个fiddle来展示整个事情 .

    回复于

相关问题