了解引导网格系统类

Question

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

我看到某些网站仅使用了col-sm课程，而其他人使用col-lg其他人使用了col-lg和col-md以及col-sm。

我是否可以为所有设备使用col-xs-#或col-md-#或任何类，并且所有设备都使用它，或者我必须使用所有类？

我如何决定应该使用哪些课程？帮助我使用bootstrap 3为不同设备的一些网站。最后我可以使用container-fluid或container。

Answer 1

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

他们说： Bootstrap是＆＃34; Mobile First＆＃34; ，这意味着，较小屏幕设备的类别具有更高的优先级，因此它们将用于首先显示存在。如果没有当前屏幕尺寸的定义或较小屏幕的任何定义，则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且<1200px的设备。这些与课程.col-md-#一致。这种情况与前一种情况相同，其中Bootstrap找到.col-md-#并按原样显示：

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

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

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

Answer 2

你几乎设置了最高的变化，所以如果我在手机上需要一个col-xs-12，但是最大的使用是在sm-＆gt; lg上使用col-8使用col-sm-8。< / p>

您在此处使用媒体查询，因此它们被写为min-width：xxpx，因此高于该最小宽度的任何内容都应该应用此规则。