Bootstrap 的每行网格列数

2022-01-18 00:00:00 grid css twitter-bootstrap

Bootstrap 带有一个 12 列的网格系统，必须放置在行内.

Bootstrap comes with a 12 columns grid system that must be placed within rows.

我的问题是，列号/行是否必须为 12(或更少)，或者我可以有如下布局

My question is, does the column number / row must be 12 (or less), or can I have a layout like the following

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

我的理解是一行中的列数不能超过 12，所以根据我之前的代码段，我会做这样的事情

My understanding was that columns number within a row mustn't exceed 12, so based on my previous snippet, I would have made something like this 

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

有什么我错过的吗?

推荐答案

Bootstrap 允许你堆叠列"，以下摘自他们的 文档:

Bootstrap allows you to "stack columns", the following is taken from their docs:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

也来自他们的 docs:

由于有四层网格可用，您一定会遇到这样的问题，即在某些断点处，由于一层比另一层高，您的列并不能完全正确地清除.要解决此问题，请结合使用 .clearfix 和我们的响应式实用程序类.

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

这里 col-xs 的值加起来是 24，使用 clearfix 添加所需的中断

Here, the col-xs values add up to 24, with a clearfix adding the required break

相关文章