Html `col-xs-*` 在 Bootstrap 4 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41794746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
`col-xs-*` not working in Bootstrap 4
提问by YoungCoder
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:
我以前没有遇到过这种情况，我很难找到解决方案。当 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>
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:
是否有一些我不理解的引导程序概念，或者这实际上是我认为的错误。我从来没有遇到过这个问题，因为我的文字过去总是与 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-rwtheitroadesjU2yc3z8GV/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>
回答by tao
col-xs-*have been dropped in Bootstrap 4 in favor of col-*.
col-xs-*已在 Bootstrap 4 中删除，而支持col-*.
Replace col-xs-12with col-12and it will work as expected.
替换col-xs-12为col-12，它将按预期工作。
Also note col-xs-offset-{n}were replaced by offset-{n}in v4.
还要注意在 v4 中col-xs-offset-{n}被替换了offset-{n}。
回答by Sabir Hussain
I just wondered, why col-xs-6did not work for me but then I found the answer in the Bootstrap 4 documentation. The class prefix for extra small devices is now col-while in the previous versions it was col-xs.
我只是想知道，为什么col-xs-6对我不起作用，但后来我在 Bootstrap 4 文档中找到了答案。超小型设备的类前缀现在col-是col-xs.
https://getbootstrap.com/docs/4.1/layout/grid/#grid-options
https://getbootstrap.com/docs/4.1/layout/grid/#grid-options
Bootstrap 4 dropped all col-xs-*classes, so use col-*instead. For example col-xs-6replaced by col-6.
Bootstrap 4 删除了所有col-xs-*类，因此请col-*改用。例如col-xs-6替换为col-6.
回答by wiwolavida
you could do this, if you want to use the old syntax (or don't want to rewrite every template)
如果您想使用旧语法（或不想重写每个模板），您可以这样做
@for $i from 1 through $grid-columns {
@include media-breakpoint-up(xs) {
.col-xs-#{$i} {
@include make-col-ready();
@include make-col($i);
}
}
}
回答by SMWalker
They dropped XS because Bootstrap is considered a mobile-first development tool. It's default is considered xs and so doesn't need to be defined.
他们放弃了 XS，因为 Bootstrap 被认为是移动优先的开发工具。它的默认值被认为是 xs，因此不需要定义。
回答by Dorjee Karma
In Bootstrap 4.3, col-xs-{value} is replaced by col-{value}
在Bootstrap 4.3 中， col-xs-{value} 被 col-{value} 替换
There is no change in sm, md, lg, xlremains the same.
sm、md、lg、xl没有变化，保持不变。
.col-{value}
.col-sm-{value}
.col-md-{value}
.col-lg-{value}
.col-xl-{value}
.col-{value}
.col-sm-{value}
.col-md-{value}
.col-lg-{value}
.col-xl-{value}
回答by bharti parmar
Bootstrap 4 Grid col-xs-* class.
Bootstrap 4 Grid col-xs-* 类。
In bootstrap 4 grid classes are different for different view or for the same.
If you want to use .col-xs-* class.
So, this class is working for mobile view.
To see the difference you can try this code below and see the difference. Then, use this class in your code.
在 bootstrap 中，4 个网格类对于不同的视图或相同的视图是不同的。
如果你想使用 .col-xs-* 类。
所以，这个类适用于移动视图。
要查看差异，您可以尝试下面的代码并查看差异。然后，在您的代码中使用这个类。
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-12">Hello!</div>
<div class="col-lg-4 col-sm-4 col-xs-12">Hi!</div>
<div class="col-lg-4 col-sm-4 col-xs-12">Hey!</div>
</div>
</div>
