Question

bootstrap的格栅系统怎么使用?

Answer 1

col-xs类，用法是<div class="col-xs-*">。它星号代表1--12的数字。我们知道栅格系统总共有12列，我们在这里使用数字几就代表着该div占用几列的宽度。假如我们在给超级小屏幕开发界面，那么我们使用该类，该类没有任何行为，不管屏幕小到多少，都不会改变div的布局。
col-sm类，用法是<div class="col-sm-*">。数字的意义同上，但是该类适合屏幕宽度为750的设备，如果在屏幕宽度小于750的设别上，该div就会水平堆叠。这是在超过750屏幕上的样式：这是在低于750屏幕上的样式：
col-md类：该类适合970像素以上屏幕。通上面讲的道理一样，假如使用屏幕尺寸小于970像素的设备查看网页，div就会垂直堆叠。这是大于970像素的设备：这是小于970像素的设备：
col-lg的行为也是一样的，这里就不演示了
下面说一下如何组合使用这几个类。我们使用<div class="col-sm-10 col-md-8">这样的方式来表示：在中等屏幕设备上该div占用8列的宽度；在小屏幕上该div占用10列的宽度。