' coll -xs-* '在引导4中不工作

我以前没有遇到过这种情况，我很难找到解决方案。当在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>

当前回答

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

将col-xs-12替换为col-12，它将像预期的那样工作。

还要注意，v4中的col-xs-offset-{n}被offset-{n}取代。

2017-01-22 19:35:50

其他回答

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

2020-03-13 23:32:25

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

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

2019-10-08 09:07:36

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

2017-05-25 10:39:50

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

2020-03-30 16:20:34

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

将col-xs-12替换为col-12，它将像预期的那样工作。

还要注意，v4中的col-xs-offset-{n}被offset-{n}取代。

2017-01-22 19:35:50

' coll -xs-* '在引导4中不工作

推荐文章

最新文章

标签