Неправильное заполнение колонок с помощью сетки Bootstrap SASS

Question

У меня есть минимальная настройка Bootstrap-SASS, которая не ведет себя хорошо. Это в основном трехколоночный шаблон, где элементы CSS генерируются через mixins. В следующем коде третий, самый правый столбец обертывается под первым, что является нежелательным поведением. Вот скриншот: http://postimg.org/image/xz3udwnhz/

Я думаю, что это вопрос недостаточного пространства: если я удалю заполнение столбца 15px из каждого столбца (вручную, используя инструменты Chrome dev), они прекрасно вписываются в контейнер.

Это 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 (в Джейд, для краткости):

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 

Am I что-то не хватает?

Answer 1

Вы не используете размер коробки: рамка-рамка. поэтому ширина ваших рядов составляет 33% + 15 * 2px (2 прокладки). Вот почему ваш третий ряд переместился на вторую строчку. Для минимальной настройки Bootstrap-SASS, которая может запускаться, вам необходимо подключить _scaffolding.scss, включая метод «box-sizing: border-box» для всех элементов. Значение border-box (в отличие от поля содержимого по умолчанию) делает конечный отображаемый ящик объявленной шириной, а любая граница и прокладка разрезаются внутри поля. Теперь мы можем смело объявить, что наш текстовый ящик имеет ширину 33%, включая отступы и границы на основе пикселей, и прекрасно выполняет макет.