twitter-bootstrap Bootstrap 3 .col-xs-offset-* 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18853308/
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
Bootstrap 3 .col-xs-offset-* doesn't work?
提问by Petran
I am using bootstrap 3 grid system loved it so far and everything was working well, I am trying to use col-xs-offset-1 and doesn't work although .col-sm-offset-1 works. What am I missing here ?
我正在使用 bootstrap 3 网格系统，到目前为止我很喜欢它，一切都运行良好，我正在尝试使用 col-xs-offset-1 并且不起作用，尽管 .col-sm-offset-1 有效。我在这里错过了什么？
<div class="col-xs-2 col-xs-offset-1">col</div>
回答by bobybx
Edit: as of Bootstrap 3.1 .col-xs-offset-*does exist, see bootstrap :: grid options
编辑：自 Bootstrap 3.1 起.col-xs-offset-*确实存在，请参阅bootstrap :: grid options
.col-xs-offset-*doesn't exist.
Offset and column ordering are only for small and more. (ONLY .col-sm-offset-*, .col-md-offset-*and .col-lg-offset-*)
.col-xs-offset-*不存在。偏移和列排序仅适用于 small 和 more。(仅.col-sm-offset-*,.col-md-offset-*和.col-lg-offset-*)
See the official documentation : bootstrap :: grid options
参见官方文档：bootstrap::grid options
回答by Anna T
Alternatively, you can add an empty div for the xs-offset (would save you having to manage the content in more than one place)
或者，您可以为 xs-offset 添加一个空的 div（这样您就不必在多个地方管理内容）
<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>
The bootstrap devs seem to be refusing to add those xs- ofsets and push/pull classes, see here: https://github.com/twbs/bootstrap/issues/9689
引导程序开发人员似乎拒绝添加那些 xs-offsets 和推/拉类，请参见此处：https: //github.com/twbs/bootstrap/issues/9689
回答by thanikkal
You could get the offset set only for xs devises by negating the higher pixels with 0 offset. Like so,
您可以通过用 0 偏移否定较高的像素来获得仅针对 xs 设计的偏移设置。像这样，
class="col-xs-offset-1 col-md-offset-0"
回答by myowz
A suggestion for when you want to do an offset but find yourself incapable at extra small widths:
当您想要进行偏移但发现自己无法处理超小宽度时的建议：
Use .hidden-xsand .visible-xsto make one version of your html block for extra small widths, and one for everything else (where you can still use an offset)
使用.hidden-xs和.visible-xs为超小宽度制作一个版本的 html 块，为其他所有内容制作一个版本（您仍然可以使用偏移量）
Example:
例子：
<div class="hero container">
<div class="row">
<div class="hidden-xs col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4 text-center">
<h2>This is a banner at the top of my site. It shows in everything except XS</h2>
<p>Here are some supporting details about my banner.</p>
</div>
<div class="visible-xs col-xs-12">
<h2 class="pull-right">This is my banner at XS width.</h2>
<p class="pull-right">This is my supporting content at XS width.</p>
</div>
</div>
</div>
回答by Shivani
col-md-offset-4 does not work if you manually apply margin to the same element. For example
如果您手动将边距应用于同一元素，则 col-md-offset-4 不起作用。例如
In the above code, offset will not be applied. Instead a margin of 0 auto will be applied
在上面的代码中，不会应用偏移量。相反，将应用 0 auto 的边距
回答by Dylan Valade
This was really frustrating so I wrote a gist you can grab that enables col-offset-xs-*. I also noticed that Bootstrap SASS repo Bower installed this week did not include col-offset-sm-0so that is shimmed too but will be redundant in many cases.
这真的很令人沮丧，所以我写了一个要点，你可以抓住它启用col-offset-xs-*. 我还注意到本周安装的 Bootstrap SASS repo Bower 不包括col-offset-sm-0所以它也被填充，但在许多情况下将是多余的。
回答by Evgeny Palguev
/*
Include this after bootstrap.css
Add a class of 'col-xs-offset-*' and
if you want to disable the offset at a larger size add in 'col-*-offset-0'
Examples:
All display sizes (xs,sm,md,lg) have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-sm-3">
xs has an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3">
xs and sm have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3">
xs, sm and md will have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3">
*/
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666666666666%;
}
.col-xs-offset-10 {
margin-left: 83.33333333333334%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666666666666%;
}
.col-xs-offset-7 {
margin-left: 58.333333333333336%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666666666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.666666666666664%;
}
.col-xs-offset-1 {
margin-left: 8.333333333333332%;
}
.col-xs-offset-0 {
margin-left: 0;
}
/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
@media (min-width: 768px) {
.col-sm-offset-0,
.col-md-offset-0,
.col-lg-offset-0 {
margin-left: 0;
}
}
回答by Mofarjul
Its not working because col-xs-offset-*is mentioned out of the media query. if you want to use it, you have to mention all the offset (eg: class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0")
它不起作用，因为col-xs-offset-*在媒体查询中提到了。如果你想使用它，就不得不提到的所有偏移（例如：class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0"）
But this is not right, they should mention col-xs-offset-*in the media query
但这是不对的，他们应该col-xs-offset-*在媒体查询中提及
回答by mahESh
The bootstrap css used in the jsfiddle link, dont have the css for col-xs-offset-*, thats why the css are not been applied. Refer the latest bootstrap css.
jsfiddle 链接中使用的 bootstrap css，没有 col-xs-offset-* 的 css，这就是未应用 css 的原因。参考最新的 bootstrap css。
回答by Mindsect Team
As of Boostrap 4.x, just as col-xs-6is now just col-6
从 Boostrap 4.x 开始，就像col-xs-6现在只是col-6
offset-xs-6is now just offset-6.
offset-xs-6现在只是offset-6。
Already tried it, definitely works.
已经试过了，绝对有效。
