Bootstrap SASS 网格的错误列填充答案

【问题标题】：Wrong column padding with Bootstrap SASS gridBootstrap SASS 网格的错误列填充
【发布时间】：2014-12-22 11:15:57
【问题描述】：

我有一个性能不佳的最小 Bootstrap-SASS 设置。它基本上是一个三列模板，其中 CSS 元素是通过 mixins 生成的。使用以下代码，最右边的第三列包裹在第一列之下，这是一种不需要的行为。这是截图：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

我错过了什么吗？

【问题讨论】：

我不明白这个问题。您实际上说您的代码不起作用，但几乎没有帮助描述完整的问题，更不用说提供一个最小而完整的问题了。
您好 jbutler483，我已经编辑了我的问题并附上了屏幕截图。希望它有所帮助:)
将宽度更改为 30%？（或 33.33% - 填充 - 边距）
“33.33% - padding - margins”解决方案工作正常（除了我失去了侧边距），但我想知道为什么我不必使用非 SASS 版本的 Bootstrap 来做这件事。 ..
恕我直言：我会放弃引导程序——它非常适合“快速演示/计划”，但对于适当的网络内容，它变得比帮助更困难

标签： html css twitter-bootstrap sass pug

【解决方案1】：

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

【讨论】：