Как сделать столбцы в Twitter bootstrap sass (alpha 4)

Question

Я пытаюсь использовать mix-col() mixin, предоставленный SASS. http://v4-alpha.getbootstrap.com/layout/grid/. Я пытаюсь создать два столбца. С скомпилированных классов, я таблица сделать

И я получаю две дивы, которые плавали рядом друг с другом в любой размер больше, чем sm.

В Bootstrap Сасс (я использую его часть React), когда я делаю:

.row { 
    @include make-row() 
} 
.left { 
    @include make-col(3) 
} 
.right { 
    @include make-col(9); 
} 

Он всплывают два рядом друг с другом, но когда я уменьшить экран вниз, два дон Не блокируйся. Они остаются плавающими. Как получить Bootstrap, чтобы отразить приведенный выше пример при использовании mixins.

В стороне от документации: @mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) - Что такое size? Это число столбцов? Я запутался, потому что есть также переменная $columns.

Answer 1

Я думаю, вам нужна оболочка для ваших столбцов или родительского контейнера.

<div class="row"> 
    <div class="col-sm-3"></div> 
    <div class="col-sm-9"></div> 
</div> 

Используйте смесь make-row для этого.

$size Используется для управления шириной столбцов.

Надеюсь, это поможет!

Answer 2

я был в необходимости решения для так я сделал это подмешать

$xs: 480px; 
$sm: 576px; 
$md: 768px; 
$lg: 992px; 
$xl: 1200px; 

@mixin break($media) { 
    @if $media==xl { 
    @media only screen and (min-width: $xl) {@content;} 
    } 
    @if $media==lg { 
    @media only screen and (min-width: $lg) and (max-width:$xl - 1) {@content;} 
    } 
    @if $media==md { 
    @media only screen and (min-width: $md) and (max-width:$lg - 1){@content;} 
    } 
    @else if $media==sm { 
    @media only screen and (min-width:$sm) and (max-width:$md - 1){@content;} 
    } 
    @else if $media==xs { 
    @media only screen and (min-width: $xs) and (max-width:$sm - 1){@content;} 
    } 
} 

Использование

ul{ 
    @include make-row(); 
    li{ 
     list-style: none; 
     @include make-col-ready(); 
     @include break(xl){ 
     @include make-col(1); 
     } 
     @include break(lg){ 
     @include make-col(2); 
     } 
     @include break(md){ 
     @include make-col(3); 
     } 
     @include break(sm){ 
     @include make-col(4); 
     } 
     @include break(xs){ 
     @include make-col(6); 
     } 
    } 
    } 

Answer 3

Там нет подробной информации о Col Mixins. Из моих экспериментов:

Для создания sm, md, lg col в BS4 нет микшинов. Вместо этого можно расширить классы col.

Ex:

.product-gallery-list-item { 
    @extend .col-md-6; 
}