Bootstrap网格类使用

Question

关于制作<ul>和<li>的回复列表的example， 我不明白以下原则的原则：

<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列。