Question

我开始从GetBootstrap来源学习bootstrap，我看到了一个例子：

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

现在col-xs-9表示他们应该在移动设备上占据9列。它在我的桌面屏幕上也有9列。这是怎么回事？

Answer 1

注意：框架中的网格系统为12 column布局。

是的，因为无论何时申请课程，它都能正常运作。

假设xs然后它将相同的属性应用于xs并且屏幕大于该大小。

因此，在您的情况下，col-xs-9将应用于extra-small屏幕和屏幕，其分辨率大于该值。

Answer 2

如果您希望它在桌面上占据100％的宽度，请尝试<div class="col-xs-9 col-md-12">。

每列等于100％宽度的1/12。因此，如果要获得100％，则列总和需要等于12。

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

此示例将在移动设备上使3个DIV彼此低于（12 = 100％宽度），但桌面上每100％宽度使用3个DIV（4x3 = 100％宽度）。当你希望DIV在较小的屏幕上占据更多宽度时，这个例子在实践中更常用。

有关更详细的说明，请参阅this。另外，当我第一次尝试理解网格系统时，我发现this tutorial非常有用。

Answer 3

您可以根据设备width添加不同的类。

在Bootstrap网格系统中，它最多可缩放为12列。在上面的例子中，9 + 4 + 6 = 18。

总和应始终为equal or less than 12。

示例

<div class="col-xs-9 col-md-5">将在移动设备中占据9列，在桌面设备中占用5列。

对于不同的设备：

col-xs-*（适用于手机）

col-sm-*（适用于小型设备）

col-md-*（适用于桌面版）

col-lg-*（适用于大型设备）

col-xs-9在桌面上占据9列

3 个答案: