嵌套Bootstrap 3行需要在col-sm- *內嗎？

Question

嵌套Bootstrap 3行是否需要在col-sm- *內，或者它們是否可以嵌套在col-md-，col-xs-等中？

該文件說col-sm- *，但它似乎並沒有明確說明是否禁止在其他col大小嵌套。

http://getbootstrap.com/css/#grid-nesting

Answer 1

您可以在同一時間使用所有班級。在此基礎上，引導程序決定哪一個最適合屏幕。

你可以在所有類型內部激發類 - 這取決於你需要什麼。

Answer 2

你所指的col-sm-*只是一個例子。它應該是col-*-*（xs，sm，md，lg）。

看看更進一步的描述推拉與.col-md-push-*和.col-md-pull-*。再一次，它只是一個例子，任何列都可以被推拉。

此外，嵌套行不一定需要直接在父列內。要記住的重要一點是每一行都緊跟一列，但嵌套行可以用任何元素包裝。

實例：

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

<div class="row"> 
    <div class="foo"> 
     <div class="col-xs-12">NOT OK</div> 
    </div> 
</div> 

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

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

Answer 3

在TWBS3的.col-xx-x類只設置在寬度百分比，例如計.col-sm-4 { width: 25% }，.col-md-4 { width: 25% }和.col-md-4 { width: 25% }。

是的都一樣，所以你只需要定義一個。

但是爲什麼有所有的變種？原因有兩個：

1. 這是因爲您可能希望列在不同的分辨率下呈現不同的寬度，例如， .col-sm-4 .col-md-3將在小屏幕中呈現1/4寬度，但在中等，大幅和x大屏幕中呈現1/3。

2. 一旦屏幕分辨率低於所選寬度，該列將渲染爲「移動第一」變體。即.col-sm-4將在小，中，lg，xl屏幕上呈現1/4寬度，但在xs屏幕上呈現全寬。類似地，僅使用.col-md-4，其呈現四分之一md，lg & xl屏幕，但全寬在sm & xs。因此，像.col-sm-4 .col-md-4這樣的類是多餘的。

所以，用知識 - 在直接回答你的問題：沒有，你只需要一個聲明，但請留意你所選擇的尺寸，因爲，當小於你的選擇，該列將渲染全寬（width: 100%）