是否有一些bootstrap概念我不理解，或者这实际上是我认为的错误。我从来没有遇到过这个问题，因为我的文本总是与xs保持一致。任何帮助将不胜感激。
这里是我的完整代码：
<！DOCTYPE html>
< html lang =en>
< head>
<！ - 必需的元标记 - >
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1，shrink-to-fit = no>
<！ - Bootstrap CSS - >
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.cssintegrity =sha384-rwoIResjU2yc3z8GV / NPeZWAv56rSmLldC3R / AZzGRnGxQQKnKkoFVhFQhNUwEyJcrossorigin =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先，然后Tether，然后是Bootstrap JS。 - >
< script src =https://code.jquery.com/jquery-3.1.1.slim.min.jsintegrity =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.jsintegrity =sha384-DztdAPBWPRXSA / 3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrbcrossorigin =匿名>< /脚本>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.jsintegrity =sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk + 02D9phzyeVkE + jo0ieGizqPLForncrossorigin = 匿名 >< /脚本>
< / body>
< / html>
解决方案
col-xs- * 已经在Bootstrap 4中删除，转而支持 col - * 。 $ b
用 col-12 替换 col-xs-12 >
另外注意 col-xs-offset- {n} 已被替换为 offset- {n} in v4。
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屋！
