Bootstrap 的每行网格列数

Question

Bootstrap 带有 12 列网格系统，必须放置在行内。

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

<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，所以根据我之前的sn-p，我会做这样的

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

有什么我错过的吗？

Answer 1

是与否……

See example fiddle

您可以拥有与您指定的布局类似的布局，但 it wont necessarily work per Bootstraps intended functionality，因此遵循他们推荐的行结构通常是个好主意。

Bootstrap 包含一个响应式、移动优先的流体网格系统， 作为设备或视口大小适当地扩展到 12 列 增加。

代替

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

你应该这样做，例如：

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

在一行中，每列定义中连字符后面的数字之和应为 12。

Answer 2

是的，一行中所有列的总和必须为 12 或更少。上面的答案是正确的，使用：

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

会给您与上面示例相同的效果。在大多数 CSS 网格系统中，12 列是相当标准的。

Answer 3

Bootstrap 允许你“堆叠列”，以下摘自他们的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 添加所需的中断

Answer 4

Patrick 的回答是正确的，但由于我在阅读文档后感到困惑，因此想更详细地介绍。

取决于你想要拥有超过 12 列而不为多行执行特定 div 的情况。

• 12 列是 1 行可以容纳的最大数量。
• 超过 12 列将导致多行。
• 默认情况下，当您减小到 XS 尺寸时，它的行为类似于 col-xs-12。这是您看到它堆叠列的地方。如果添加 col-xs-n
，则可以更改此行为

More detailed jsfiddle Example

<div class="container-fluid">
    <div class="row">
       <div class="col-sm-12 col-md-2">
           Navigation
       </div>
       <div class="col-sm-6 col-md-5">
           Editor
       </div>
       <div class="col-sm-6 col-md-5">
           Display
       </div>
    </div>
</div>

在此示例中，当以中等大小查看时，您会看到第一列占据 2 列，然后其他两个 div 拆分剩余的列。当你把它缩小到小的时候，第一个 div 将是一个全新的行，其余的 div 将分割为 50/50。然后，当您进一步缩小到 xs 时，它仍然会执行默认行为并均匀地堆叠列。

当您希望一行中的所有列都以一种分辨率显示但希望多行以不同的分辨率显示时，使用此方法很有意义。如果您总是想要两行，那么为每行制作单独的 div 会更有意义。

Answer 5

然而.... http://getbootstrap.com/customize/#grid-system

Answer 6

如果您使用的是 Bootstrap 4，您可以轻松地创建一个自定义的 10 列网格，使用他们的 SASS mixins 作为网格。

$grid-columns: 10;   // This is where you define the number of columns you need/want

@if $enable-grid-classes {
  .row-odd-col {
    @include make-row();
    > {
        @if $enable-grid-classes {
            @include make-grid-columns();
        }
    }
  }
}

然后你可以像这样使用它们-

<div class="row-odd-col">
    <div class="col-md-5 col-lg-2">1</div>
    <div class="col-md-5 col-lg-2">2</div>
    <div class="col-md-5 col-lg-2">3</div>
    <div class="col-md-5 col-lg-2">4</div>
    <div class="col-md-5 col-lg-2">5</div>
</div>

欲了解更多详情，请点击此处 - https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins

Answer 7

要进行网站的响应式设计，首先要学习 bootstrap 或 css 网格布局。这也是进行响应式设计的好方法。用bootstrap先学网格系统再学。不同设备的最大最小宽度，然后设置否。每个设备的列，还设置 @media（最小宽度：px）和（最大宽度：px）{}

并为每个设备（如手机、平板电脑、笔记本电脑和台式机）设置个人属性，以实现完美契合。