`col-xs-*` 在 Bootstrap 4 中不起作用答案

【问题标题】：`col-xs-*` not working in Bootstrap 4`col-xs-*` 在 Bootstrap 4 中不起作用
【发布时间】：2017-06-07 06:40:12
【问题描述】：

我以前没有遇到过这种情况，我很难找到解决方案。当在 bootstrap 中有一列等于 medium 时：

<h1 class="text-center">Hello, world!</h1>

  <div class="container">
      <div class="row">
          <div class="col-md-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

文本对齐工作正常：

但是当使列等于特小时：

 <div class="container">
      <div class="row">
          <div class="col-xs-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

然后文本对齐不再起作用：

是否有一些我不理解的引导概念，或者这实际上是我认为的错误。我从来没有遇到过这个问题，因为我的文本过去总是与 xs 对齐。任何帮助将不胜感激。这是我的完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>

      <div class="container">
          <div class="row">
              <div class="col-xs-12 text-center">
                  <h1>vicki williams</h1>
              </div>
          </div>
      </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

【问题讨论】：

col-xs-* 在最新的 v4 版本中不再存在，这就是您看到此内容的原因。 col-xs-12 没有像 col-md-12 那样设置为 100% 的宽度。检查 DevTools 以查看所有内容并查看此Pull

标签： html css twitter-bootstrap twitter-bootstrap-4 text-alignment

【解决方案1】：

如果你想在 Bootstrap 4 中应用一个额外的小类，你需要使用 col-。重要的是要知道 col-xs- 在 Bootstrap4 中被删除了

【讨论】：

请不要重复旧的、现有的、排名靠前的答案。这不会为社区增加价值。

【解决方案2】：

他们放弃了 XS，因为 Bootstrap 被认为是一种移动优先的开发工具。它的默认值被认为是 xs，因此不需要定义。

【讨论】：

他们本可以添加它作为替代而不是删除它。看来他们确实需要保证不同版本之间的兼容性问题，因为他们已经成功了。

【解决方案3】：

在Bootstrap 4.3 中，col-xs-{value} 被 col-{value} 替换

没有变化sm、md、lg、xl保持不变。

.col-{值}
.col-sm-{值}
.col-md-{值}
.col-lg-{值}
.col-xl-{值}

【讨论】：

【解决方案4】：

如果你想使用旧语法（或者不想重写每个模板），你可以这样做

@for $i from 1 through $grid-columns {
  @include media-breakpoint-up(xs) {
    .col-xs-#{$i} {
      @include make-col-ready();
      @include make-col($i);
    }
  }
}

【讨论】：

【解决方案5】：

我只是想知道，为什么 col-xs-6 对我不起作用，但后来我在 Bootstrap 4 文档中找到了答案。超小型设备的类前缀现在是 col-，而在之前的版本中是 col-xs。

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

Bootstrap 4 删除了所有 col-xs-* 类，因此请改用 col-*。例如col-xs-6 替换为col-6。

【讨论】：

【解决方案6】：

col-xs-* 已在 Bootstrap 4 中被删除，取而代之的是 col-*。

将col-xs-12 替换为col-12，它将按预期工作。

另请注意 col-xs-offset-{n} 在 v4 中已替换为 offset-{n}。

【讨论】：

始终检查docs。快乐编码！ :: } ::
这不是您通常会检查文档的内容。我到处都是文档，也错过了这个。我原以为，现在在两个 bs4 站点迁移中， col 是通用的，而 col-xs 是特定的，但是事后看来，这没有任何意义，因为首先是移动设备，xs 及更高版本是通用的（默认）。感谢您的提醒，我想我在上次迁移期间确实略过了那个，但在这个上被卡住了。
如果您决定采用这种方式，请阅读此答案以了解发生了什么变化between v3 and v4。）以及工具链接。这不是一件容易的事，恕我直言，使用干净的模板并插入 php 比更改标记更容易。
道文档中没有解释，非常感谢！
@tao- 先生我试过 col-sm-12 也没有用