twitter-bootstrap - 如何删除 Twitter Bootstrap 3 中的响应式功能?

标签 twitter-bootstrap responsive-design media-queries twitter-bootstrap-3

自 Bootstrap 3 起,不再为响应式样式表和标准样式表提供单独的文件。那么如何轻松删除响应式功能呢?

最佳答案

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

// 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;

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

编辑:克里斯指出,您可以在 Bootstrap 站点上的在线 less 编译器中设置这些变量

关于twitter-bootstrap - 如何删除 Twitter Bootstrap 3 中的响应式功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17935601/

相关文章:

css - 在哪里可以找到 Bootstrap 2.3 CDN?

html - 在浏览器中测试媒体查询

html - 在 html 电子邮件中调整大小时使图像适合单元格

iphone - Safari 100% 高宽异常

html - 媒体查询在 Chrome 中不起作用,在 Firefox 中有效

django - 如何为 django-endless-pagination 设置 Bootstrap 主题?

css - Bootstrap 列跳过两个地方

css - 在 Ruby on Rails 中将 Fullcalendar 与 Twitter Bootstrap 结合使用

html - @media 打印和(方向 :portrait) does not work if (orientation:landscape) is also specified

css - 媒体查询 : how to make text change color when window width gets below 600px