Question

当屏幕大小介于768和1024像素之间时，我想堆叠两列。我怎样才能做到这一点？我是否必须更改任何引导变量？我使用bootstrap-sass。

Answer 1

Bootstrap中的默认断点是：

超小型设备电话（＆lt; 768px）
小型设备平板电脑（≥768px）
中型设备台式机（≥992px）
大型设备台式机（≥1200px）

使用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。完成此操作后，您可以使用bootstrap col类来确定何时进行堆栈，何时不进行堆栈。

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

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

希望这有帮助。

改变bootstrap sass破发点

1 个答案: