css - bootstrap 如何仅使用 css 在特定视口(viewport)宽度下折叠列？

Question

当视口(viewport)宽度超过某个边界时，bootstrap 如何从应用 col-sm-* 更改为 col-xs-*(如果宽度>768，应用 sm，否则应用 xs)。

<div class="container">
    <div class="row">
        <!-- NAVIGATION -->
        <div class="col-sm-2 col-xs-12">
            <ul class="nav nav-pills nav-stacked">
                <li><a href="">Manage Projects</a></li>
                <li><a href="">Billing</a></li>
                <li><a href="">Account Settings</a></li>
            </ul>
        </div>
        <!-- VIEW -->
        <div class="col-sm-10 col-xs-12">
            VIEW
        </div>
    </div>
</div>

在 bootstrap.css 中，我看到如果 @media(min-width>768) 设置了 col-sm-* 宽度和 float-left，但我没有看到 col-xs-* 应该被忽略。
特别是，我看到如果窗口变大，如何设置 col-sm-* 可能会覆盖 col-xs-* (可能是浏览器的一个 qwirk - 要应用的最后一个属性是呈现的属性)，但是如果窗口越来越小，col-sm-* 永远不会被告知不要应用，如果这有意义的话。

Answer 1

正如评论中指出的那样，Bootstrap 被设计为“移动优先”，这意味着它首先为移动屏幕设计样式，然后随着屏幕变大添加其他样式。这是通过使用 CSS 媒体查询，特别是使用 min-width 条件来完成的。

一旦浏览器超过最小宽度，这些 min-width 媒体查询会将其中的所有样式添加到页面。此外，正如您在问题中提到的那样，CSS 实际上确实使用了最后应用的样式，当多次应用相同的样式时(这假设两种样式具有相同的选择器权重，但这是一个完全不同的主题)

考虑到这两点，如果您要检查那些列元素，您会发现当您的浏览器很大时，col-xs-* 类正在被应用，但是被 col-sm-* 类覆盖。这是因为这个类在 CSS 中的顺序在另一个之后，给予它优先权。但是，一旦您的浏览器宽度低于该点，媒体查询就会从页面中删除这些样式，从而允许 col-xs-* 类重新获得其优先级。

如果您希望我更深入地解释任何内容，请告诉我，我会尽力而为。