更改引導程序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％。

希望這會有所幫助。