如何删除 Twitter Bootstrap 3 中的响应式功能? [英] How to remove responsive features in Twitter Bootstrap 3?

问题描述

自 Bootstrap 3 起，响应式样式表和标准样式表不再有单独的文件.那么如何轻松删除响应式功能?

解决方案

要停用非桌面样式，您只需更改 variables.less 文件中的 4 行代码.像这样在 variables.less 文件中设置屏幕宽度断点:

<前>//媒体查询断点//------------------------------------------------——//超小屏幕/手机//注意:从 v3.0.1 开始弃用 @screen-xs 和 @screen-phone@screen-xs: 1px;@screen-xs-min: @screen-xs;@screen-phone: @screen-xs-min;//小屏幕/平板电脑//注意:从 v3.0.1 开始弃用 @screen-sm 和 @screen-tablet@screen-sm: 2px;@screen-sm-min: @screen-sm;@screen-tablet: @screen-sm-min;//中屏/桌面//注意:从 v3.0.1 开始弃用 @screen-md 和 @screen-desktop@screen-md: 3px;@screen-md-min: @screen-md;@screen-desktop: @screen-md-min;//大屏幕/宽桌面//注意:从 v3.0.1 开始弃用 @screen-lg 和 @screen-lg-desktop@screen-lg: 9999px;@screen-lg-min: @screen-lg;@screen-lg-desktop:@screen-lg-min；

这将桌面样式媒体查询上的最小宽度设置得较低，以便它适用于所有屏幕宽度.感谢 2callchaos 的改进！移动样式中定义了一些基本样式，因此我们需要确保包含它们.

克里斯指出，您可以在引导站点上的在线less编译器中设置这些变量

Since Bootstrap 3 there's no longer seperate files for responsive and standard stylesheets. So how can I easily remove the responsive features?

解决方案

To inactivate the non-desktop styles you just have to change 4 lines of code in the variables.less file. Set the screen width breakpoints in the variables.less file like this:

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  1px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  2px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  3px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  9999px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

This sets the min-width on the desktop style media query lower so that it applies to all screen widths. Thanks to 2calledchaos for the improvement! Some base styles are defined in the mobile styles, so we need to be sure to include them.

Edit: chris notes that you can set these variables in the online less compiler on the bootstrap site

这篇关于如何删除 Twitter Bootstrap 3 中的响应式功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！