`col-xs- *`不能在Bootstrap中工作4

问题描述：

我以前没有遇到过这个问题，而且我正在努力寻找解决方案。具有引导像这样等于介质的列时：`col-xs- *`不能在Bootstrap中工作4

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

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

是否有一些bootstrap co除了我不理解，或者这实际上是我认为的错误。我从来没有遇到过这个问题，因为我的文本总是与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>

'col-xs- *'不再存在于最新的v4发行版中，这就是为什么你会看到这一点。 'col-xs-12'没有象你的'col-md-12'那样宽度设置为100％。查看DevTools查看所有内容并查看此内容[Pull]（https://github.com/twbs/bootstrap/pull/20934） – vanburen

答

col-xs-*一直赞成col-*在引导4下降。

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

另请注意col-xs-offset-{n}在第4版中被替换为offset-{n}。

永远不会想到/知道这件事！非常感谢。 – YoungCoder

总是检查[文档]（https://v4-alpha.getbootstrap.com/layout/grid/#grid-options）。快乐的编码！ ::} :: –

这通常不会检查文档。我全都过了文档，也错过了这个。我曾想过，现在有两个bs4站点迁移，col是通用的，col-xs是特定的，但事后看来这没有意义，因为首先移动，xs和up是通用的（默认）。感谢提醒，我想我在我最后一次迁移期间做了一些改动，但是在这个问题上一直停留在此。 – blamb

答

我只是想知道，为什么col-xs-6不会为我工作，然后我在bootstrap-4文档中找到。类前缀的超小型设备现在是“同事”在以前的版本，这是“COL-XS”

https://v4-alpha.getbootstrap.com/layout/grid/#grid-options

Bootstrap4抛弃了所有的“COL-XS-”类使用“同事”，而不是。即col-xs-6被col-6替换。

`col-xs- *`不能在Bootstrap中工作4

相关推荐