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 和我们的响应式实用程序类.

<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

这篇关于Bootstrap 的每行网格列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！