bootstrap 如何仅使用 css 在某个视口宽度处折叠列？

Question

当视口宽度超过某个边界（如果宽度>768，应用 sm，否则应用 xs）时，引导程序如何从应用 col-sm-* 更改为 col-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-* 宽度和左浮动，但我看不到 col-xs-* 应该被忽略。
特别是，我看到如果窗口越来越大，如何设置 col-sm-* 可能会覆盖 col-xs-* （可能是浏览器的一个 qwirk - 要应用的最后一个属性是呈现的属性），但是如果窗口越来越小，col-sm-* 永远不会被告知不要应用，如果这有意义的话。

Answer 1

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

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

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

如果您希望我更深入地解释任何事情，请告诉我，我会看看我能做些什么。

Answer 2

里面有几个问题或问题，每一个都因为某种原因值得回答，所以我会单独回答：

"如果宽度>768，则应用 sm，否则应用 xs"

其实这个假设是错误的。不是 ELSE 应用 xs，而是应用 xs。由于sm的一些属性覆盖了xs的属性，所以他们赢了。

"在 bootstrap.css 中，我看到如果 @media(min-width>768) 设置 col-sm-* 宽度和左浮动，但我看不到 col-xs-* 应该是 忽略”

不是 col-xs-* 被忽略，而是 col-sm-* 覆盖 col-sm-* 的某些属性，当正确的屏幕宽度触发相应的媒体查询时。

“也许是浏览器的怪癖”

根本不是浏览器的怪癖，而是 CSS 的基础特性，因为特定样式规则的最后应用胜出（除非被特定性或 !important 否决）。

"但是如果窗口越来越小，col-sm-* 永远不会被告知不要 应用”

实际上，它是被媒体查询告知不要应用的。如果您的窗口为 767 像素，则根本不应用 col-sm-*，因为 @media(min-width>768) 将其排除在外。

希望这对您有所帮助...并不是要对您的 cmets 针锋相对，但如果其中任何一个可以帮助您理解，最好全部分享！