在 Bootstrap 3 中瞭解網格類 (col-sm-＃和 col-lg-＃)

問題描述

我開始在 Bootstrap 3，我有一些麻煩，瞭解網格類是如何被使用的。

這是我迄今為止所想到的：

看來 col-sm-#和 col-lg-#類與普通的舊 col-#不同，因為它們只適用於螢幕高於一定大小 (分別為 768 畫素和 992 畫素) 時。如果省略-sm-或-lg-，div 將永遠不會摺疊成一列。

但是，當我在 col-sm-6 中建立兩個 div 時，它似乎只有當視窗在 768 畫素和 992 畫素寬之間時並列。換句話說，如果我把視窗收縮一下，然後慢慢加寬，佈局是單列，然後是兩列，然後再次返回單列。

這是預期的行為嗎？
如果我需要兩列超過 768px 的任何列，我應該應用兩個類嗎？ (<div class="col-sm-6 col-lg-6">)
還應該包括 col-6 嗎？ <div class="col-6 col-sm-6 col-lg-6">

最佳解決方案

[更新如下]

我再看了一下這個檔案，看來我忽略了一個專門講述的部分。

我的問題的答案：

是的，它們只適用於特定範圍，而不是一定寬度以上的所有範圍。
是的，這些課程是要組合起來的。
看起來這在某些情況下是合適的，而不是其他情況，因為 col＃類基本上等同於 col-xsm-＃或寬度大於 0px(所有寬度) 。

除了閱讀檔案太快以外，我覺得我很困惑，因為我以「Bootstrap 2 心態」進入了 Bootstrap 3 。具體來說，我在 v2 和 v3 中使用了 (可選的) 響應風格 (bootstrap-responsive.css)，而且相當不同 (對於更好的 IMO) 。

更新穩定版本：

這個問題最初是在 RC1 出來的時候寫的。他們在 RC2 中做了一些重大改變，所以對於現在讀者來說，並不是所有上述內容都適用。

至於我當前正在撰寫的時候，col-*-#類似乎會向上申請。所以例如，如果你想要一個元素是 12 列 (全寬) 的手機，但兩個 6 列 (半頁) 平板電腦和上，你會做這樣的事情：

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(他們還寫了這個問題後還新增了一個額外的 xs 斷點。)

次佳解決方案

Here 你有一個非常好的教程，這說明瞭如何在 Bootstrap 3 中使用新的網格類。

它也包括 mixins 等

第三種解決方案

要修改 SDP 的上面的答案，您不需要在<div class="col-xs-12 col-sm-6"> 中宣告 col-xs-12 。 Bootstrap 3 是 mobile-first，所以預設情況下，每個 div 列都是 100％寬度的 div – 這意味著在”xs” 大小是 100％寬度，它將始終預設為該行為，無論您在 sm, md, lg 中設定什麼。如果您希望 xs 列不是 100％，那麼你通常會做一個 col-xs-(1-11)。

第四種方案

“If I want two columns for anything over 768px, should I apply both classes?”

這應該是簡單的：

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

也不需要新增 col-lg-6 。

演示：http://www.bootply.com/73119

第五種方案

最好的理解方法是從上到下 (大型桌上型電腦到手機)

首先，因為 B3 是移動的，所以如果你使用 xs，那麼這些列將從大型桌面到 xs 相同 (我建議使用 xs 或 sm，因為這將保持一切你想要的每個螢幕尺寸)

其次，如果要對不同裝置或解析度的列賦予不同的寬度，則可以新增多個類，例如

以上將根據螢幕解析度更改寬度，請記住，我保留每個類中的總列= 12

我希望我的答案有所幫助！

參考文獻

Understanding the grid classes ( col-sm-# and col-lg-# ) in Bootstrap 3

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

在 Bootstrap 3 中瞭解網格類 (col-sm-＃和 col-lg-＃)