Question

我之前没有遇到过这种情况，我很难找到解决方案。当引导程序中的列等于中等时，如下所示：

<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>

text-align工作正常：

但是当使列等于超小时，就像这样：

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

然后text-align不再有效：

是否有一些我不理解的引导概念，或者这实际上是一个错误，就像我认为的那样。我从来没有遇到过这个问题，因为我的文本在过去与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>

Answer 1

col-xs-*已被删除在Bootstrap 4中，转而使用col-*。

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

另请注意，{4}中的col-xs-offset-{n}已取代offset-{n}。

Answer 2

我只是想知道，为什么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。

Answer 3

他们之所以放弃XS，是因为Bootstrap被认为是移动优先的开发工具。默认值为xs，因此无需定义。

Answer 4

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

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

Answer 5

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

sm，md，lg，xl 没有变化。

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

Answer 6

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

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

6 个答案: