`col-xs-*` 在 Bootstrap 4 中不起作用 [英] `col-xs-*` not working in Bootstrap 4

查看：29
本文介绍了`col-xs-*` 在 Bootstrap 4 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

你好，世界！</h1><div class="容器"><div class="row"><div class="col-md-12 text-center"><h1>薇琪威廉姆斯</h1>

文本对齐工作正常:

但是当像这样使列等于超小时:

 
<div class="row"><div class="col-xs-12 text-center"><h1>薇琪威廉姆斯</h1>

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

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

<html lang="zh-cn"><头><!-- 必需的元标记--><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/AZzGRnGxQQEhJKhk"crossorigin="匿名"><身体><h1 class="text-center">你好，世界！</h1><div class="容器"><div class="row"><div class="col-xs-12 text-center"><h1>薇琪威廉姆斯</h1>

<!-- 首先是 jQuery，然后是 Tether，然后是 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匿名"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx5Qin1Brankwx"cross<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkizqE+jo0ynG"cross></脚本>

解决方案

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

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

还要注意 col-xs-offset-{n} 在 v4 中被替换为 offset-{n}.

I have not encountered this before, and I am having a very hard time trying to find the solution. When having a column equal to medium in bootstrap like so:

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

The text-align works fine:

But when making the column equal to extra small like so:

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

Then the text-align no longer works:

Is there some bootstrap concept that I am not understanding or is this in fact a error like I think it is. I have never had this issue, as my text always has aligned in the past with xs. Any help would be greatly appreciated. Here is my complete code:

<!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-* have been dropped in Bootstrap 4 in favor of col-*.

Replace col-xs-12 with col-12 and it will work as expected.

Also note col-xs-offset-{n} were replaced by offset-{n} in v4.

这篇关于`col-xs-*` 在 Bootstrap 4 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆