Question

 <div class="row">
 <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
 <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>

我已经在自举网格中读过，网格应该完全等于12列。但是在引导网站本身的网格示例中，他们已经提到了上面的代码.. col-xs-12和col xs-6等于18但不是12.请澄清这种混乱。

Answer 1

你问题中的标记是“正确的”，但可能无法解释原因。基本上，如果您选择使用超过12列，则在初始12之后的任何额外列将包裹到下一行。例如：

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

将产生类似的结果：

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

这两种方法都是允许的，但在第二个示例中使用row, columns, row, columns方法时，您可以更好地控制页面的外观和样式。

在此处阅读更多内容：Bootstrap Column Wrapping

如果在一行中放置的列数超过12列，则每组额外列将作为一个单元换行换行。

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-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-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Answer 2

Bootstrap总共只允许12列。

为什么示例本身显示18也让我不知所措，但需要考虑的是，如果定义了超过12列，则下一组列将被推送到下一行。这通常很容易用lg或sm或md显示。

使用xs列，宽度完全自动。这可能意味着您可以在一条线上定义18并且它们将全部自动宽度。我说你最好的选择是玩xs并看看为什么bootstrap提供它作为18的例子。

我将重点放在宽度（自动）和其他列类型的定义上，作为与xs的比较。这是关键。

Answer 3

您的读取Bootstrap网格，但您没有阅读Bootstrap网格CSS。 Bootstrap网格等于18列是不可能的。在Bootstrap网格CSS下面。

.col-xs-12, .col-sm-12, .col-md-12, col-lg-12{
  width: 100%;
  float: left:
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
  min-height: 1px;
}
.col-xs-6, .col-sm-6, .col-md-6, col-lg-6{
  width: 50%;
  float: left:
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
  min-height: 1px;
}
.col-xs-1, .col-sm-1, .col-md-1, col-lg-1{
  width: 8.3333%;
  float: left:
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
  min-height: 1px;
}

三个差异@meida查询CSS宽度相同（100/12）。

Answer 4

您不能使用col-xs默认值等于12列使用下面的代码

<div class="container">  
<div class="row">
<div class="col-lg-8 col-sm-6 col-xs-12">.col-lg-8 .col-sm-6 .col-xs-12</div>
<div class="col-lg-4 col-sm-6 col-xs-12">.col-lg-4 .col-sm-6 .col-xs-12</div>
</div>
</div>

此代码是正确的，不包含任何错误

可能是您没有使用container类

当您使用一个row时，这意味着您可以输入12列你用过的一行必须是每列的集合不要超过12列例如clo-lg-8 + col-lg-4 = col-lg-12这是真的但如果小于12列的列的集合没有问题。但不应超过12列。

在您的示例中col-xs-12 + col-xs-6 = col-xs-18这是错误的，因为您使用了一个row并将所有列放入第一个div而您可以将另一个colimn放入其中行必须减少col-xs-12，直到可以将第二个div中的列添加到该行。

bootstrap grid xs变为18列而不是12列

4 个答案: