引导网格和列偏移

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上的of sm-4而不是of 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>

​

另外，我注意到您正在使用borders。因此，请确保您提供了以下内容：

* {box-sizing: border-box;}

Answer 2

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