为什么 col-sm-* 适用于 xs 屏幕？答案

【问题标题】：Why is col-sm-* applying to xs screens?为什么 col-sm-* 适用于 xs 屏幕？
【发布时间】：2022-01-25 04:23:57
【问题描述】：

我正在为一个项目使用引导程序，并且我为 xs、sm 和 md 屏幕使用不同的列宽。当我应用 col-xs-* 和 col-md-* 时，列的大小可以完美地适应 xs、md 和 lg 屏幕。当我添加 col-sm-* 时，列的大小可以完美地调整为 sm、md 和 lg，但我失去了 xs 配置，它被 sm 布局替换。

谁能帮帮我？如何保持 xs 布局和 sm 布局？

    <div class="container-fluid main-content text-center">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-10">
          ...
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
              ...
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6">
              ...
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-2 latest-headlines">
          ...
          <div class="more-news-button">
            ...
          </div>
        </div>
      </div>
    </div>

【问题讨论】：

如果我理解正确，您使用的是自定义版本的引导程序？如果是这样，我会先尝试原始版本。
你的 Bootstrap 版本是多少？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是 Boostrap 3.4.1。事实证明，问题是我的头脑中没有这条线。这样就解决了！

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

【讨论】：