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

问题描述

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

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

推荐答案

要停用非桌面样式，您只需在variables.less文件中更改4行代码即可.在variables.less文件中设置屏幕宽度断点，如下所示:

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;

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

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.

克里斯(Chris)注意，您可以在引导站点上的在线less编译器中设置这些变量

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

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