本文翻譯自：What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
Twitter Bootstrap中的col-lg-* ， col-md-*和col-sm-* col-md-*什麼區別？
#1樓
參考：https://stackoom.com/question/1LLpm/Bootstrap中的col-lg-col-md-和col-sm-有什麼區別
#2樓
From Twitter Bootstrap documentation : 從Twitter Bootstrap文檔中 ：
- small grid (≥ 768px) =
.col-sm-*, 小網格（≥768px）=.col-sm-*， - medium grid (≥ 992px) =
.col-md-*, 中格（≥992px）=.col-md-*， - large grid (≥ 1200px) =
.col-lg-*. 大網格（≥1200px）=.col-lg-*。
#3樓
Updated 2019... 2019年更新...
The Bootstrap 3 grid comes in 4 tiers (or "breakpoints")... Bootstrap 3網格分爲4層（或“斷點”）...
- Extra small (for smartphones
.col-xs-*) 特小（適用於智能手機.col-xs-*） - Small (for tablets
.col-sm-*) 小（適用於平板電腦.col-sm-*） - Medium (for laptops
.col-md-*) 中（適用於筆記本電腦.col-md-*） - Large (for laptops/desktops
.col-lg-*). 大（適用於筆記本電腦/臺式機.col-lg-*）。
These grid sizes enable you to control grid behavior on different widths. 這些網格大小使您可以控制不同寬度上的網格行爲。 The different tiers are controlled by CSS media queries . 不同的層由CSS 媒體查詢控制。
So in Bootstrap's 12-column grid... 因此，在Bootstrap的12列網格中...
col-sm-3 is 3 of 12 columns wide (25%) on a typical small device width (> 768 pixels) 在典型的小型設備寬度（> 768像素）上， col-sm-3是12列寬（25％）中的3列
col-md-3 is 3 of 12 columns wide (25%) on a typical medium device width (> 992 pixels) col-md-3在典型的中等設備寬度（> 992像素）上爲12列寬（25％）中的3列
The smaller tier ( xs , sm or md ) also defines the size for larger screen widths . 較小的層（ xs ， sm或md ）還定義了較大屏幕寬度的大小 。 So, for the same size column on all tiers, just set the width for the smallest viewport... 因此，對於所有層上相同大小的列，只需設置最小視口的寬度即可。
<div class="col-lg-3 col-md-3 col-sm-3">..</div> is the same as, <div class="col-lg-3 col-md-3 col-sm-3">..</div>與
<div class="col-sm-3">..</div>
Larger tiers are implied. 隱含更大的層。 Because col-sm-3 means 3 units on sm-and-up , unless specifically overridden by a larger tier that uses a different size. 因爲col-sm-3 3 units on sm-and-up意味着3 units on sm-and-up ，除非被使用不同大小的較大層特別覆蓋。
xs (default) > overridden by sm > overridden by md > overridden by lg xs （默認值）>被sm覆蓋>被md覆蓋>被lg覆蓋
Combine the classes to use change column widths on different grid sizes . 組合類以在不同的網格大小上使用更改列寬 。 This creates a responsive layout. 這將創建一個響應式佈局。
<div class="col-md-3 col-sm-6">..</div>
The sm , md and lg grids will all "stack" vertically on screens/viewports less than 768 pixels. sm ， md和lg網格都將在小於768像素的屏幕/視口上垂直“堆疊”。 This is where the xs grid fits in. Columns that use the col-xs-* classes will not stack vertically, and continue to scale down on the smallest screens. 這就是xs網格所在的地方。使用col-xs-*類的col-xs-*將不會垂直堆疊，並且會繼續在最小的屏幕上按比例縮小。
Resize your browser using this demo and you'll see the grid scaling effects. 使用此演示調整瀏覽器的大小，您將看到網格縮放效果。
Bootstrap 4 引導程序4
In Bootstrap 4 there is a new -xl- size, see this demo . Bootstrap 4中有一個新的-xl-大小，請參閱此演示 。 Also the -xs- infix has been removed , so smallest columns are simply col-1 , col-2 .. col-12 , etc.. -xs-綴也已刪除 ，因此最小的列只是col-1 ， col-2 .. col-12等。
col-* - 0 (xs) col-* -0（xs） col-sm-* - 576px col-sm-* sm- col-sm-* -576像素 col-md-* - 768px col-md-* col-lg-* - 992px col-lg-* -992px col-xl-* - 1200px col-xl-* -1200px
Bootstrap 4 Grid Demo Bootstrap 4網格演示
Additionally, Bootstrap 4 includes new auto-layout columns . 此外，Bootstrap 4包括新的自動佈局列 。 These also have responsive breakpoints ( col , col-sm , col-md , etc..), but don't have defined % widths. 這些也具有響應斷點（ col ， col-sm ， col-md等），但是沒有定義寬度百分比。 Therefore, the auto-layout columns fill equal width across the row. 因此，自動佈局列在行中的寬度相等 。
This article explains more about the Bootstrap grid 本文介紹了有關Bootstrap網格的更多信息
#4樓
I think the confusing aspect of this is the fact that BootStrap 3 is a mobile first responsive system and fails to explain how this affects the col-xx-n hierarchy in that part of the Bootstrap documentation. 我認爲這令人困惑的方面是，BootStrap 3是一個移動優先響應系統，並且無法在Bootstrap文檔的那部分中解釋這如何影響col-xx-n層次結構。 This makes you wonder what happens on smaller devices if you choose a value for larger devices and makes you wonder if there is a need to specify multiple values. 這使您想知道如果爲較大的設備選擇一個值，在較小的設備上會發生什麼，並且使您懷疑是否需要指定多個值。 (You don't) （你不）
I would attempt to clarify this by stating that... Lower grain types (xs, sm) attempt retain layout appearance on smaller screens and larger types (md,lg) will display correctly only on larger screens but will wrap columns on smaller devices. 我將嘗試通過聲明以下內容來澄清這一點：較小的晶粒類型（xs，sm）嘗試在較小的屏幕上保留佈局外觀，而較大的晶粒類型（md，lg）僅在較大的屏幕上正確顯示，但在較小的設備上會包裹列。 The values quoted in previous examples refer to the threshold as which bootstrap degrades the appearance to fit the available screen estate. 先前示例中引用的值是指閾值，因爲該引導會降低外觀以適合可用的屏幕空間。
What this means in practice is that if you make the columns col-xs-n then they will retain correct appearance even on very small screens, until the window drops to a size that is so restrictive that the page cannot be displayed correctly. 實際上，這意味着，如果將列col-xs-n設置爲n，則即使在很小的屏幕上，它們也將保持正確的外觀，直到窗口大小減小到無法正確顯示頁面的程度爲止。 This should mean that devices that have a width of 768px or less should show your table as you designed it rather than in degraded (single or wrapped column form). 這應該意味着寬度爲768px或更小的設備應在設計時顯示錶格，而不是以降級（單列或包裹列的形式）顯示。 Obviously this still depends on the content of the columns and that's the whole point. 顯然，這仍然取決於列的內容，這就是重點。 If the page attempts to display multiple columns of large data, side by side on a small screen then the columns will naturally wrap in a horrible way if you did not account for it. 如果頁面嘗試在小屏幕上並排顯示大數據的多列，那麼如果您不考慮這些列，這些列自然會以一種可怕的方式包裝。 Therefore, depending on the data within the columns you can decide the point at which the layout is sacificed to display the content adequately. 因此，根據列中的數據，您可以確定要佈局的點，以充分顯示內容。
eg If your page contains three col-sm-n columns bootstrap would wrap the columns into rows when the page width drops below 992px. 例如，如果您的頁面包含三個col-sm-n列，則當頁面寬度降至992px以下時，引導程序會將這些列包裝爲行。 This means that the data is still visible but will require vertical scrolling to view it. 這意味着數據仍然可見，但需要垂直滾動才能查看。 If you do not want your layout to degrade, choose xs (as long as your data can be adequately displayed on a lower resolution device in three columns) 如果您不希望佈局降級，請選擇xs（只要您的數據可以在三列中以較低分辨率的設備充分顯示）
If the horizontal position of the data is important then you should try to choose lower granularity values to retain the visual nature. 如果數據的水平位置很重要，則應嘗試選擇較低的粒度值以保持外觀。 If the position is less important but the page must be visible on all devices then a higher value should be used. 如果位置不太重要，但頁面必須在所有設備上可見，則應使用更高的值。
If you choose col-lg-n then the columns will display correctly until the screen width drops below the xs threshold of 1200px. 如果選擇col-lg-n，則列將正確顯示，直到屏幕寬度降至1200像素的xs閾值以下。
#5樓
The bootstrap docs do explain it, but it still took me a while to get it. 引導文檔確實對此進行了解釋，但是仍然花了我一段時間。 It makes more sense when I explain it to myself in one of two ways: 當我以兩種方式之一向自己解釋時，它更有意義：
If you think of the columns starting out horizontally, then you can choose when you want them to stack . 如果您想到的列是水平開始的，那麼可以選擇何時堆疊它們 。
For example, if you start with columns: ABC 例如，如果您從以下列開始：ABC
You decide when should they stack to be like this: 您可以決定何時堆疊它們，如下所示：
A 一種
B 乙
C C
If you choose col-lg, then the columns will stack when the width is < 1200px. 如果選擇col-lg，則當寬度<1200px時，列將堆疊。
If you choose col-md, then the columns will stack when the width is < 992px. 如果選擇col-md，則當寬度<992px時，列將堆疊。
If you choose col-sm, then the columns will stack when the width is < 768px. 如果選擇col-sm，則寬度小於768px時，列將堆疊。
If you choose col-xs, then the columns will never stack. 如果選擇col-xs，則列將永遠不會堆疊。
On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal : 另一方面，如果您考慮從堆疊開始的列，則可以選擇它們在何時變爲水平 ：
If you choose col-sm, then the columns will become horizontal when the width is >= 768px. 如果選擇col-sm，則寬度> = 768px時，列將變爲水平。
If you choose col-md, then the columns will become horizontal when the width is >= 992px. 如果選擇col-md，則寬度> = 992px時，列將變爲水平。
If you choose col-lg, then the columns will become horizontal when the width is >= 1200px. 如果選擇col-lg，則當寬度> = 1200px時，列將變爲水平。
#6樓
Device Sizes and class prefix: 設備大小和類前綴：
- Extra small devices Phones (<768px) -
.col-xs-超小型設備電話（<768px）-..col-xs- - Small devices Tablets (≥768px) -
.col-sm-小型設備平板電腦（≥768px）-.col.col-sm- - Medium devices Desktops (≥992px) -
.col-md-中型設備臺式機（≥992px）-..col-md- - Large devices Desktops (≥1200px) -
.col-lg-大型設備臺式機（≥1200px）-.col.col-lg-
Grid options: 網格選項：
Reference: Grid System 參考： 網格系統