更改引导程序sass破坏点

Question

当屏幕的大小介于768和1024像素之间时，我想叠加两列。 我该如何做到这一点？我必须更改任何引导程序变量吗？ 我使用bootstrap-sass。

Answer 1

在引导默认断点是：

• 超小型设备手机（< 768px）
• 小型设备片（≥768px）
• 剂装置，台式机（≥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; 

所以，你需要选择哪个断点，将改变。我会说你只设置（在你自己的variables.scss！永远不要调整bootstrap _variables.scss本身。）$ screen-md为1024px。完成此操作后，您可以使用引导列类来确定何时堆栈以及何时不堆栈。

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

这将堆叠SM和MD大小。在LG和XS上，它将占用可用宽度的50％。

希望这会有所帮助。