引導電網類用途

Question

對此example使得<ul>和<li>， 一個負責任的名單我不明白以下行的原則：

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"> 

這使得名單發生了響應式設計。 我瞭解四個類別中的每一個類別，但是它們的組合功能不同。

Answer 1

既然你提到你知道他們中的一些，我想下面的人（即引導網格佈局是12列）：

col-xs-12 => Take full width for size extra small 
col-sm-10 => width 10/12 width for small 
col-md-8 => width 8/12 width for medium 

中剩餘的一些：

col-sm-offset-1 => put a margin of 1 col width on the left for small 
col-md-offset-2 => put a margin of 2 cols with on the left for medium 

Answer 2

屏幕尺寸爲xs時的全寬，小尺寸的10列寬 - 推過1列，中等大小的中8列寬 - 推過2列。

偏移類中的sm和md告訴你它正在影響哪個大小。因此.col-md-offset-2意味着在屏幕上的12個網格列中，col-md-8將開始2列以上，因此它從第3列位置開始。佔3-12，總共8列。