Bootstrap网格和列偏移

Question

我有以下html：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下结果如下：

根据Bootstrap docs，它应完全适合行。但显然有一些错误，我无法弄清楚。

当我考虑11列时，它适合（在最后一个DIV而不是col-sm-5上注意col-sm-4）：

<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 宽度分辨率。点击下面整页的代码片段对我来说很合适。

<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会以正确的方式显示它。< / 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-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 s。所以请确保你这样做：

* {box-sizing: border-box;}

Answer 2

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