Изменение точек взлома sass

Question

Я хочу складывать два столбца, когда размер экрана составляет от 768 до 1024 пикселей. Как я могу это достичь? Нужно ли мне менять любую загрузочную переменную? Я использую bootstrap-sass.

Answer 1

По умолчанию точки останова в Bootstrap является:

• Дополнительных маленькие устройства Телефонов (< 768px)
• Малых устройств таблетки (≥768px)
• Средних устройств Desktops (≥992px)
• Больших устройств Рабочие столы (≥1200px)

(источник: http://getbootstrap.com/css/#grid)

При использовании SASS вы можете переопределить следующие переменные:

// Extra small screen/phone 
//** Deprecated `$screen-xs` as of v3.0.1 
$screen-xs:     480px !default; 
//** Deprecated `$screen-xs-min` as of v3.2.0 
$screen-xs-min:    $screen-xs !default; 
//** Deprecated `$screen-phone` as of v3.0.1 
$screen-phone:    $screen-xs-min !default; 

// Small screen/tablet 
//** Deprecated `$screen-sm` as of v3.0.1 
$screen-sm:     768px !default; 
$screen-sm-min:    $screen-sm !default; 
//** Deprecated `$screen-tablet` as of v3.0.1 
$screen-tablet:    $screen-sm-min !default; 

// Medium screen/desktop 
//** Deprecated `$screen-md` as of v3.0.1 
$screen-md:     992px !default; 
$screen-md-min:    $screen-md !default; 
//** Deprecated `$screen-desktop` as of v3.0.1 
$screen-desktop:    $screen-md-min !default; 

// Large screen/wide desktop 
//** Deprecated `$screen-lg` as of v3.0.1 
$screen-lg:     1200px !default; 
$screen-lg-min:    $screen-lg !default; 
//** Deprecated `$screen-lg-desktop` as of v3.0.1 
$screen-lg-desktop:   $screen-lg-min !default; 

// So media queries don't overlap when required, provide a maximum 
$screen-xs-max:    ($screen-sm-min - 1) !default; 
$screen-sm-max:    ($screen-md-min - 1) !default; 
$screen-md-max:    ($screen-lg-min - 1) !default; 

Таким образом, вы должны выбрать точку останова вы изменится. Я бы сказал, что вы только установили (в свои собственные переменные.scss! НИКОГДА не настраивайте bootstrap _variables.scss.) $ Screen-md to 1024px. После этого вы можете использовать классы bootstrap col, чтобы определить, когда стекать, а когда нет.

<div class="col-xs-6 col-sm-12 col-md-12 col-lg-6">...</div> 

Это будет складываться на SM и MD-размер. На LG и XS он будет занимать 50% доступной ширины.

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