\`col-xs-\*\` 在 Bootstrap 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>

原文由 YoungCoder 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 786
2 个回答

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

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

另请注意 col-xs-offset-{n} offset-{n} 取代。

原文由 tao 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Sabir Hussain 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题