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，所以基于我之前的片段，我会做出这样的事情

<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

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 2

帕特里克的回答是正确的，但是在阅读文档之后我很困惑，想要了解更多细节。

根据您拥有超过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 3

是，不......

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 4

然而....如果你决定使用他们的（Bootstrap＆＃39; s）更少的fies，那么你可以将@ grid-columns设置为任何值，而不仅仅是12。 http://getbootstrap.com/customize/#grid-system

Answer 5

如果您使用的是Bootstrap 4，则可以使用SASS mixins轻松创建自定义10列网格。

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

为了制作网站的响应式设计，首先要学习bootstrap或css网格布局。它也是制作响应式设计的好方法。用bootstrap首先学习网格系统并学习。最大不同设备的最小宽度，然后设置否。每个设备的列也设置 @media（min-widtth：px）和（max-width：px）{}

为手机，平板电脑，笔记本电脑和台式机等各种设备设置个人财产，以实现完美契合。

Answer 7

是一行中所有列的总和必须为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列是非常标准的。

Bootstrap的每行网格列数

7 个答案:

See example fiddle