Bootstrap 网格和列偏移

Question

我有以下 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 列时，它适合（注意最后一个 DIV 上的 col-sm-4 而不是 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 中做错了什么？

Answer 1

全屏对我来说效果很好，可以用xs 替换会帮助你！我在 1366 宽度分辨率。单击下面 sn-p 中的完整页面对我来说很好。

<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>

另外，我注意到您使用的是borders。所以一定要给这个：

* {box-sizing: border-box;}

Answer 2

我们使用的是bootstrap-sass，但与引导文件的导入顺序不一致。一旦订单正确，问题就消失了。