如何更改引导媒体查询条件？

Posted 2023-03-06

【中文标题】如何更改引导媒体查询条件？

【英文标题】：How to change the bootstrap media queries conditions?

【发布时间】：2016-05-27 03:34:26

【问题描述】：

我们有大屏幕的引导设置：-

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) 

我想覆盖最大宽度：1920px。如何在不破解核心的情况下做到这一点？

注意：我正在通过 bower 维护我的前端依赖项，因此我希望在自定义 CSS 文件上维护更改。有没有办法“覆盖”这些配置？

【参考方案1】：

使用文档上的自定义页面创建自定义版本。

http://getbootstrap.com/customize/#media-queries-breakpoints

【参考方案2】：

您只需要更新 Bootstrap 的 _variables.scss 文件。这些是您可用于更改断点的所有变量：

$screen-xs:                  480px !default;
$screen-xs-min:              $screen-xs !default;
$screen-phone:               $screen-xs-min !default;

$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
$screen-tablet:              $screen-sm-min !default;

$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
$screen-desktop:             $screen-md-min !default;

$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
$screen-lg-desktop:          $screen-lg-min !default;

$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

我不确定这是否是您所说的“破解核心”的意思，但我向您保证不是这样。这些值意味着要更改，从文件中它们自己的 cmets 可以看出：

## Define the breakpoints at which your layout will change, adapting to different screen sizes.