Bootstrap Grid类用法

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

offset类中的sm和md告诉您它所影响的大小。所以.col-md-offset-2意味着在屏幕上的12个网格列中，col-md-8将从第2列开始，所以它从第3列位置开始。共占3-12列，共8列。