Html 引导SASS网格的列填充错误

我有一个最小的引导SASS设置，它表现不好。它基本上是一个三列模板，其中CSS元素通过mixin生成。在下面的代码中，第三列（最右边的列）在第一列下换行，这是不需要的行为。以下是一个屏幕截图：

我认为这是空间不足的问题：如果我从每一列中删除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"

.container
  @include container-fixed()

.row
  @include make-row()

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

这是

base.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"

.container
  @include container-fixed()

.row
  @include make-row()

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

这是

index.html

（为了简洁起见，用Jade表示）：

---

我遗漏了什么吗？

您没有使用框大小：边框框。因此，行的宽度为33%+15*2px（2个填充）。这就是为什么你的第三排在第二排。对于可以运行的最小引导SASS设置，您需要连接_scaffolding.scs，包括所有元素的“框大小：边框框”方法。边框框值（与内容框默认值相反）使最终渲染的框成为声明的宽度，并在框内剪切任何边框和填充。我们现在可以安全地将文本区域的宽度声明为33%，包括基于像素的填充和边框，并完美地完成布局。

我不明白这个问题。实际上，您已经说过您的代码不起作用，但几乎没有帮助全面描述这个问题，更不用说提供一个最小且完整的问题了。您好jbutler483，我已经编辑了我的问题并附上了一个屏幕截图。希望有帮助：）将宽度改为30%？（或33.33%-填充边距）“33.33%-填充边距”解决方案运行良好（除了我失去了侧边填充），但我想知道为什么我不必在非SASS版本的引导中这样做……IMHO：我会远离引导-这对于“快速演示/计划”来说很好，但对于正确的web内容来说，它会变成更多的阻碍而不是帮助