Question

我有一个最小的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

我错过了什么吗？

Answer 1

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

使用Bootstrap SASS网格填充错误的列填充

1 个答案: