Html `col xs-*`在引导程序4中不工作_Html_Css_Twitter Bootstrap_Twitter Bootstrap 4_Text Alignment

Html `col xs-*`在引导程序4中不工作

html css twitter-bootstrap

Html `col xs-*`在引导程序4中不工作,html,css,twitter-bootstrap,twitter-bootstrap-4,text-alignment,Html,Css,Twitter Bootstrap,Twitter Bootstrap 4,Text Alignment,我以前从未遇到过这种情况，我正在努力寻找解决方案。当引导中有一列等于medium时，如下所示： <h1 class="text-center">Hello, world!</h1> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1>vicki wi

我以前从未遇到过这种情况，我正在努力寻找解决方案。当引导中有一列等于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>


你好，世界！
维姬·威廉姆斯

列xs-*

已在引导程序4中删除，取而代之的是列xs-*

将

col-xs-12

替换为

col-12

，它将按预期工作

另请注意，

col-xs-offset-{n}

在v4中被

offset-{n}

替换。

我只是想知道，为什么

col-xs-6

对我不起作用，但后来我在Bootstrap 4文档中找到了答案。超小型设备的类前缀现在是col-
，而在以前的版本中是

col xs

bootstrap4删除了所有

col-xs-*

类，所以改用

col-*

。例如，

col-xs-6

替换为

col-6

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

在中，列xs-{value}被列-{value}替换

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

.col-{value}
.col sm-{value}
.col md-{value}
.col lg-{value}

.col xl-{value}

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

如果您想在引导程序4中应用一个额外的小类，您需要使用col-。

需要知道的重要一点是，col xs-在Bootstrap4中被删除，col xs-*在最新的v4版本中不再存在，这就是为什么您会看到这一点。

col-xs-12

不像您的

col-md-12

那样具有100%的宽度集。检查DevTools以查看所有内容，并查看此始终检查。快乐的编码！：}：这不是你通常会检查文档的东西。我看了所有的文件，也错过了这个。我曾经认为，在两次bs4站点迁移中，col是通用的，而col xs是特定的，但事后看来，这毫无意义，因为首先是移动的，xs和以上是通用的（默认）。谢谢你的提醒，我想我在上一次迁移时确实略过了，但在这次迁移中我被困在了这个问题上。请阅读这个关于更改内容的答案。）以及一个工具链接，如果你决定这样做的话。这不是一项容易的任务，我想，在干净的模板上工作，插入php比更改标记更容易。这在文档中没有解释，非常感谢@tao-先生，我试过col-sm-12，但它也不起作用。请不要重复旧的、现有的、排名很高的答案。这不会给社区增加价值。

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