使用BootstrapSASS网格填充错误的列填充-WrongcolumnpaddingwithBootstrapSASSgrid

I have a minimal Bootstrap-SASS setup that doesn't behave well. It's basically a three-column template, where CSS elements are generated via mixins. With the following code the third, rightmost column wraps under the first one, which is an unwanted behavior. Here is a screenshot: http://postimg.org/image/xz3udwnhz/

我有一个最小的Bootstrap-SASS设置,表现不佳。它基本上是一个三列模板,其中CSS元素是通过mixins生成的。使用以下代码,第三个最右边的列包装在第一个列下,这是一个不需要的行为。这是一个截图:http://postimg.org/image/xz3udwnhz/

I think it's a matter of insufficient space: if I remove the 15px column padding from each column (manually, via Chrome dev tools) they fit nicely inside the container.

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

This is the main.sass:

这是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"

This is base.sass:

这是base.sass:

.container
  @include container-fixed()

.row
  @include make-row()

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

And this is the index.html (in Jade, for brevity's sake):

这是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=')
    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

Am I missing something?

我错过了什么吗?

1 个解决方案