html - 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 宽度分辨率。单击下面代码段中的整个页面对我来说效果很好。

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