blocks|key|21402|text|或者，您可以为xs偏移量添加一个空的div+(这样可以省去在多个地方管理内容的麻烦)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|21403|<div+class="col-xs-1+visible-xs"></div><div+class="col-xs-2">col</div>|code-block|syntax|javascript|21404|bootstrap开发人员似乎拒绝添加这些xs-+ofset和推/拉类，请参阅此处：https://github.com/twbs/bootstrap/issues/9689|offset|length|21405|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/issues/9689^0|0|0|16|19|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Alternatively, you can add an empty div for the xs-offset (would save you having to manage the content in more than one place)</p>

<pre><code>&lt;div class="col-xs-1 visible-xs"&gt;&lt;/div&gt;&lt;div class="col-xs-2"&gt;col&lt;/div&gt;
</code></pre>

<p>The bootstrap devs seem to be refusing to add those xs- ofsets and push/pull classes, see here: <a href="https://github.com/twbs/bootstrap/issues/9689">https://github.com/twbs/bootstrap/issues/9689</a></p>


blocks|key|237855|text|您可以通过取消偏移量为0的较高像素来获得仅用于xs设备的偏移量集。就像这样，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|237856|class="col-xs-offset-1+col-md-offset-0"|code-block|syntax|javascript|237857|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could get the offset set only for xs devises by negating the higher pixels with 0 offset.
Like so,</p>

<pre><code>class="col-xs-offset-1 col-md-offset-0"
</code></pre>


blocks|key|21603|text|如果手动将边距应用于同一元素，则col-md-offset-4不起作用。例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|21604|在上面的代码中，将不应用偏移量。取而代之的是应用0自动的边距|21605|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>col-md-offset-4 does not work if you manually apply margin to the same element. For example</p>



<p>In the above code, offset will not be applied. Instead a margin of 0 auto will be applied </p>


blocks|key|21382|text|这真的很令人沮丧，所以我写了一个要点，你可以抓住它来启用col-offset-xs-*。我还注意到，本周安装的Bootstrap+SASS+repo+Bower没有包含col-offset-sm-0，所以它也被填补了，但在许多情况下会是多余的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|21383|Bootstrap+3+xs+offset+shim|21384|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/dylanvalade/7362739^0|S|F|2C|F|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>This was really frustrating so I wrote a gist you can grab that enables <code>col-offset-xs-*</code>.  I also noticed that Bootstrap SASS repo Bower installed this week did not include <code>col-offset-sm-0</code> so that is shimmed too but will be redundant in many cases.</p>

<p><a href="https://gist.github.com/dylanvalade/7362739" rel="nofollow">Bootstrap 3 xs offset shim</a></p>


blocks|key|237990|text|++/*

++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%25;
}
.col-xs-offset-11+{
++++margin-left:+91.66666666666666%25;
}
.col-xs-offset-10+{
++++margin-left:+83.33333333333334%25;
}
.col-xs-offset-9+{
++++margin-left:+75%25;
}
.col-xs-offset-8+{
++++margin-left:+66.66666666666666%25;
}
.col-xs-offset-7+{
++++margin-left:+58.333333333333336%25;
}
.col-xs-offset-6+{
++++margin-left:+50%25;
}
.col-xs-offset-5+{
++++margin-left:+41.66666666666667%25;
}
.col-xs-offset-4+{
++++margin-left:+33.33333333333333%25;
}
.col-xs-offset-3+{
++++margin-left:+25%25;
}
.col-xs-offset-2+{
++++margin-left:+16.666666666666664%25;
}
.col-xs-offset-1+{
++++margin-left:+8.333333333333332%25;
}
.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;
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|237991|https://gist.github.com/dylanvalade/7362739|unstyled|offset|length|237992|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|17|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Q|8|@]|9|@$G|R|H|S|1|T]]|A|$]]|$1|I|3|-4|5|F|7|U|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|E]]]]

<pre><code>  /*

  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
  &lt;div class="col-xs-11 col-xs-offset-1 col-sm-3"&gt;

  xs has an offset of 1
  &lt;div class="col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3"&gt;

  xs and sm have an offset of 1
  &lt;div class="col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3"&gt;

  xs, sm and md will have an offset of 1
  &lt;div class="col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3"&gt;

*/

.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;
    }
}
</code></pre>

<p><a href="https://gist.github.com/dylanvalade/7362739" rel="nofollow">https://gist.github.com/dylanvalade/7362739</a></p>


blocks|key|21490|text|它不起作用，因为媒体查询中没有提到col-xs-offset-*。如果你想使用它，你必须提到所有的偏移量(例如：class="col-xs-offset-3+col-sm-offset-2+col-md-offset-1+col-lg-offset-0")|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|21491|但这是不对的，他们应该在媒体查询中提到col-xs-offset-*|21492|entityMap^0|H|F|1K|1Z|0|J|F|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

<p>Its not working because <code>col-xs-offset-*</code> is mentioned out of the media query. if you want to use it, you have to mention all the offset (eg: <code>class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0"</code>)</p>

<p>But this is not right, they should mention <code>col-xs-offset-*</code> in the media query</p>


blocks|key|238183|text|在jsfiddle链接中使用的引导css，没有用于col-xs-offset-*的css，这就是为什么没有应用css的原因。参考最新的引导css。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|238184|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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.</p>


blocks|key|21512|text|问题是你把.name类而不是nameclass|type|unstyled|depth|inlineStyleRanges|entityRanges|data|21513|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>The problem is that you're putting .name class instead of nameclass</p>


blocks|key|21639|text|不再使用col-md-offset-4，而是使用offset-md-4，在进行偏移时，您不再需要使用col.在您的例子中，使用offset-xs-1，这将会起作用。确保您已经将bootstrap.css文件夹调用到html中，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|21640|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>instead of using col-md-offset-4 use instead offset-md-4, you no longer have to use col when you're offsetting. In your case use offset-xs-1 and this will work. make sure you've called the bootstrap.css folder into your html as follows  .</p>


blocks|key|21686|text|根据最新的bootstrap+v3.3.7+xs-offseting是允许的。请参阅此处的文档bootstrap+offseting。所以你可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|21687|<div+class="col-xs-2+col-xs-offset-1">.col-xs-2+.col-xs-offset-1</div>|code-block|syntax|javascript|21688|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/css/#grid-offsetting^0|1B|J|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>As per the latest bootstrap v3.3.7 xs-offseting is allowed. See the documentation here <a href="http://getbootstrap.com/css/#grid-offsetting" rel="nofollow noreferrer">bootstrap offseting</a>. So you can use</p>

<pre><code>&lt;div class="col-xs-2 col-xs-offset-1"&gt;.col-xs-2 .col-xs-offset-1&lt;/div&gt;
</code></pre>


blocks|key|237970|text|删除类前面的圆点，使其看起来像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|237971|<div+class="col-xs-2+col-xs-offset-1">col</div>|code-block|syntax|javascript|237972|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Remove the dot in front of your class so it looks like this:</p>

<pre><code>&lt;div class="col-xs-2 col-xs-offset-1"&gt;col&lt;/div&gt;
</code></pre>


<p>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 ?</p>

<pre><code>&lt;div class="col-xs-2 col-xs-offset-1"&gt;col&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/petran/zMcs5/2/" rel="noreferrer">http://jsfiddle.net/petran/zMcs5/2/</a></p>


Bootstrap 3 .col-xs-offset-* doesn't work?

我使用的是bootstrap 3网格系统，到目前为止我很喜欢它，一切都运行得很好，我正在尝试使用col-xs-offset-1，虽然.col-sm-offset-1可以工作，但仍然不能工作。这里我漏掉了什么？<div class="col-xs-2 col-xs-offset-1">col</div>

问Bootstrap 3..col xs-offset-*不工作吗？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3..col xs-offset-*不工作吗？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3..col xs-offset-*不工作吗？
EN