html - Bootstrap SASS 网格的错误列填充

Question

我有一个运行不正常的最小 Bootstrap-SASS 设置。它基本上是一个三列模板，其中 CSS 元素是通过混合生成的。使用以下代码，最右边的第三列换行在第一列之下，这是一种不受欢迎的行为。这是屏幕截图:http://postimg.org/image/xz3udwnhz/

我认为这是空间不足的问题:如果我从每列中删除 15px 的列填充(手动，通过 Chrome 开发工具)，它们就会很好地适合容器内部。

这是main.sass:

/* minimal Bootstrap-SASS */
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables"
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins"
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/normalize"
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/utilities"
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/responsive-utilities"

/* entry point */
@import "base"

这是base.sass:

.container
  @include container-fixed()

.row
  @include make-row()

.col
  @include make-md-column(4)

这是 index.html(在 Jade 中，为简洁起见):

doctype html
html(lang="en") 
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(href='styles/main.css', media='all', rel='stylesheet', type='text/css')

  body
    div(class='container')
      div(class='row')
        div(class='col') col
        div(class='col') col
        div(class='col') col

我错过了什么吗？

Answer 1

您不使用 box-sizing: border-box。所以你的行宽是 33% + 15*2px (2 paddings)。这就是为什么您的第三行移到第二行的原因。对于可以运行的最小 Bootstrap-SASS 设置，您需要连接 _scaffolding.scss，包括所有元素的方法 'box-sizing: border-box'。 border-box 值(相对于 content-box 默认值)使最终呈现的框成为声明的宽度，并且框内的任何边框和填充都被切割。我们现在可以安全地将我们的文本区域声明为 33% 宽度，包括基于像素的填充和边框，并完美地完成布局。