`col-xs-*`在Bootstrap 4中不起作用
You*_*der 133 html css text-alignment twitter-bootstrap twitter-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>
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>
And*_*hiu 355
col-xs-*在Bootstrap 4中被弃用了col-*.
替换col-xs-12为col-12,它将按预期工作.
另外注意在v4中col-xs-offset-{n}被替换offset-{n}.
- 请务必查看[docs](https://v4-alpha.getbootstrap.com/layout/grid/#grid-options).快乐的编码!::} <(((*> :: (11认同)
- 从来没有想过/知道这个!非常感谢. (8认同)
- 这通常不会检查文档.我到处都是博士,也错过了这个.我曾经想过,现在超过两个bs4站点迁移,col是通用的,col-xs是特定的,但事后看来这没有意义,因为首先是移动,xs和up是通用的(默认).感谢提醒,我想我在上一次迁移期间确实浏览了一下,但是在这个问题上我一直坚持这个. (7认同)
- 请阅读有关 [v3 和 v4 之间] 变化的答案（/sf/ask/3436389281/#49091398）。以及工具的链接，如果您决定采用这种方式。这不是一件容易的事，恕我直言，在干净的模板上工作更容易，只需插入 php 而不是更改标记。 (3认同)
Sab*_*ain 20
我只是想知道,为什么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.
小智 12
在Bootstrap 4.3中，col-xs-{value} 被 col-{value} 替换
sm没有变化，md，lg，xl保持不变。
.col-{值}
.col-sm-{值}
.col-md-{值}
.col-lg-{值}
.col-xl-{值}