了解bootstrap网格系统类

Question

我是新用户bootstrap 3，我对使用网格系统有一些误解。

我看到一些网站只使用col-sm类等使用col-lg等二手col-lg和col-md和col-sm。

我可以使用col-xs-#或col-md-#或任何类别的所有设备，并为所有设备上升或我必须使用所有类别？

我如何决定我应该使用哪些类？帮助我与一些网站使用引导3不同的设备。最后一件事，当我可以使用container-fluid或container。

Answer 1

我不认为你首先了解Bootstrap3的想法。

他们说：Bootstrap是“Mobile First”，这意味着，较小的屏幕设备的类具有较高的优先级，所以如果存在，它们将用于首先显示。如果当前屏幕尺寸没有定义，或者对于较小的屏幕没有定义，则col将相互堆叠，换句话说，它们全部变成col-xs-12。

让使之具体化：

- 你有你的<div class="row"></div>几个栏里面：

<div class="container"> 
    <div class="row" style="color: white;"> 
     <div class="row" style="color: white;"> 
     <div class="col-md-6 col-sm-9" style="background: red;">.col-md-6 .col-sm-9</div> 
     <div class="col-md-6 col-sm-3" style="background: green;">.col-md-6 .col-sm-3</div> 
    </div> 
</div> 

要理解这一点，假设我们有开放的网站包含上面的代码中4个不同的设备：

• 电话（超小设备）：屏幕宽度为< 768px的设备。这些与类.col-xs-#。 Bootstrap将查找是否存在等于或小于当前屏幕大小的屏幕大小的定义。这里我们没有它，只是.col-sm-#和.col-md-#，它们属于更大的屏幕尺寸，并没有相同或更小屏幕尺寸的类别。在这种情况下，Bootstrap将处理默认行为，以确保无论如何，这将很好地显示;所以它使所有的div彼此堆叠在一起，换句话说，它使它们全部变成.col-xs-12。像这样：

• 平板电脑（小型设备）：屏幕尺寸> = 768px和< 992px的设备。这些与类.col-sm-#。现在Bootstrap发现存在.col-md-6的定义。它只是将其显示为它的定义为：

• 桌面（中等器件）：此类设备的屏幕尺寸> = 992px和< 1200像素。这些与类.col-md-#。这种情况与前面的情况相同，其中Bootstrap找到.col-md-#并按原样显示：

• 桌面（大型设备）：屏幕尺寸> = 1200px的设备。这些与类.col-lg-#。这种情况下，Bootstrap现在发现类似.col-lg-#。现在，它爬下楼梯到较小的屏幕尺寸设备，以获得较小设备的定义。在这种情况下，.col-md-#是最接近.col-lg-#的那个，所以它会到位。因此，我们得到了相同的结果一样的媒体装置的情况下：

毕竟，我们应该记住，较小的屏幕尺寸类将具有更高的优先级。你不必为一个div定义所有的类，但只有一些你认为它们是重要的，适合你的显示目的。

对于你的问题，答案是YES。您只能为您的网站定义.col-lg-#。但是，当用户在手机或平板电脑或小型桌面上查看时，所有元素都会堆叠在一起。

Answer 2

几乎你设置了最高的变化，所以如果我需要一个手机上的col-xs-12，但最大的不利用就是说在sm-> lg上的col-8使用col-sm-8。

您在这里使用媒体查询，因此它们被写为最小宽度：xxpx，因此超过该最小宽度的任何内容都应该应用此规则。