COL-XS-9以在桌面上

-2

9列，我開始從GetBootstrap源學習引導，我看到了一個例子：COL-XS-9以在桌面上

<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列。這是怎麼發生的？

來源

2015-10-11 Fahad Uddin

注意：框架中的網格系統是12 column佈局。

是的，它的運作正常，因爲每當你申請一個班級。

讓我們假設xs然後它將相同的屬性將應用於xs和屏幕大於該大小。

因此，在你的情況下，col-xs-9將被應用於extra-small屏幕和屏幕的分辨率大於此。

來源

2015-10-11 17:12:41

如果您希望它佔用桌面上寬度的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真的很有幫助，當我開始嘗試瞭解網格系統。

來源

2015-10-11 17:11:39 turbopipp

-2

您可以根據您的設備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-*（放大裝置）

來源

2015-10-11 17:19:41

COL-XS-9以在桌面上

回答

相關問題