引导网格和列偏移

我有以下HTML：引导网格和列偏移

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-5"> 
 
      .col-sm-5 
 
     </div> 
 
     <div class="col-sm-5 col-sm-offset-2"> 
 
      .col-sm-5 .col-sm-offset-2 
 
     </div> 
 
    </div> 
 
</div>

这导致到以下几点：

按照Bootstrap docs应该完全适合的行。但显然有一些事情是错误的，我无法弄清楚。

当我拿11列考虑它适合（通知COL-SM-4上的最后一个DIV，而不是COL-SM-5）：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-5"> 
      .col-sm-5 
     </div> 
     <div class="col-sm-4 col-sm-offset-2"> 
      .col-sm-5 .col-sm-offset-2 
     </div> 
    </div> 
</div>

它是什么，我做错了在我的第一个HTML？

来源

2016-06-28 Andrew Flierman

对我来说工作正常..请检查小提琴https://jsfiddle.net/bxd12auh/1/ –

使用'-xs-'类。 –

'-xs-'类没有什么区别 –

适合我全屏使用，可替换为xs会帮助你！我在1366宽度分辨率。点击以下代码片段中的完整页面对我来说效果不错。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-5"> 
 
     .col-sm-5 
 
    </div> 
 
    <div class="col-sm-offset-2 col-sm-5"> 
 
     .col-sm-5 .col-sm-offset-2 
 
    </div> 
 
    </div> 
 
</div>

因为这完全依赖于屏幕尺寸，我坚信你的屏幕尺寸没有容纳sm，所以使用xs将显示它以正确的方式。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-5"> 
 
     .col-xs-5 
 
    </div> 
 
    <div class="col-xs-offset-2 col-xs-5"> 
 
     .col-xs-5 .col-xs-offset-2 
 
    </div> 
 
    </div> 
 
</div>

另外，我注意到，您正在使用border秒。所以一定要确保你把这个：

* {box-sizing: border-box;}

来源

2016-06-28 10:24:14

嗨Praveen，我的屏幕尺寸是2560px宽，这样可以容纳'sm'不是吗？ ;-)。替换为'xs'并没有为我做任何事情，让我更新我的问题，因为问题可能在HTML –

的其他地方。另外，我没有使用'容器流体' –

@AndrewFlierman啊！你在这。 ** 1。**尝试使用CDN，因为它看起来像'bootstrap.css'被修改了。 ** 2。**如果这不起作用，请尝试使用“容器流体”。 –

我们使用bootstrap-sass并有一个与引导文件的进口秩序的不一致。一旦订单正确，问题就消失了。

来源

2016-06-28 12:42:13

引导网格和列偏移

回答

相关问题