twitter-bootstrap Bootstrap 3 col-sm-offset-x 对 col-md-x 结构的影响

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23844955/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:47:23  来源:igfitidea点击:

Bootstrap 3 col-sm-offset-x affects to the col-md-x structure

classtwitter-bootstrapgridoffset

提问by amibumping

I have this code <div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs">and bootstrap is making the offset to the col-md-12 too, I'm checking the code and I have no clue why this is happening, I think that this wasn't happening before, but I have go back a lot of steps in the code maybe to the point it was working and nothing.

我有这段代码<div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs">,引导程序也在对 col-md-12 进行偏移,我正在检查代码,但我不知道为什么会发生这种情况,我认为以前没有发生过,但我已经回去了代码中的很多步骤可能到了它可以正常工作的地步。

If I remove the offset it works as suppose...but I don't have the offset on smaller resolutions.

如果我删除偏移量,它会像假设一样工作......但我没有较小分辨率的偏移量。

This is the page where you can see the problem: Test page

这是您可以看到问题的页面测试页面

Is the block where it puts "Especial 52o Aniversario"

是放置“Especial 52o Aniversario”的块

Thanks for the help, is driving me nuts

谢谢你的帮助,快把我逼疯了

回答by DavidG

The offset applies from sm all the way up to max size. To stop it, add in col-md-offset-0to prevent the offset applying to larger sizes.

偏移量从 sm 一直应用到最大大小。要阻止它,请添加col-md-offset-0以防止偏移应用于更大的尺寸。

回答by bob

Bootstrap 3 = Mobile first.

Bootstrap 3 = 移动优先。

Any styles you apply in the xs 'size' range will be carried through to the larger 'sizes' unless you are using the helper utilities like .visible-sm class

您在 xs 'size' 范围内应用的任何样式都将被用于更大的 'sizes' 除非您使用诸如 .visible-sm 类的辅助实用程序

If you want to have a one column offset that is visible during the small range only:

如果您希望只有在小范围内可见的一列偏移量:

    <div class="row">
      <div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs">
        <div class="col-sm-1 visible-sm"><div>
        <div>
          ...continue your content
        </div>