改变引导系统断点

Question

当屏幕大小在768到1024像素之间时，我想堆叠两列。我怎样才能做到呢?我必须改变任何引导变量吗?我使用bootstrap-sass。

Answer 1

Bootstrap默认的断点是:

• 超小型设备手机(<768px)
• 小型设备平板(≥768px)
• 中型设备台式机(≥992px)
• 大型设备桌面(≥1200px)

(来源:http://getbootstrap.com/css/#网格)

当你使用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;

所以你需要选择你要改变的断点。我会说你只在你自己的变量中设置。永远不要调整bootstrap _variables。)将$screen-md设置为1024px。完成这些之后，您可以使用bootstrap col类来确定何时堆叠，何时不堆叠。

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

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