禁用 Twitter Bootstrap 响应式布局之一 [英] Disable ONE of the Twitter Bootstrap responsive layouts

问题描述

我想禁用其中一种响应式布局.在切换到移动视图之前，无论第二小的布局是什么.

I would like to disable one of the Responsive layouts. Whatever the second smallest layout is before it switches to the mobile view.

推荐答案

如果您从 LESS 文件编译，这很容易.打开 responsive.less 并在MEDIA QUERIES"下注释或删除您不想要的任何布局的 @import 声明.例如，如果您不希望平板电脑成为普通台式机，则代码如下所示:

If you are compiling from the LESS files, this is quite easy. Open up responsive.less and under "MEDIA QUERIES" comment out or remove the @import declaration for whichever layout you don't want. For example, if you didn't want the Tablets to regular desktops one, the code would look like this:

// MEDIA QUERIES
// ------------------

// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";

// Tablets to regular desktops
// @import "responsive-768px-979px.less"; // commented this out because I don't like it

// Large desktops
@import "responsive-1200px-min.less";

之后只需重新编译 bootstrap.less 就可以了.

After that just recompile bootstrap.less and you should be done.

另一方面，如果您不是从 bootstrap.less 编译而是直接使用 bootstrap-responsive.css，您可以搜索媒体查询对于特定设备并删除/注释掉该部分.

If, on the other hand, you're not compiling from bootstrap.less and are using bootstrap-responsive.css directly, you can search for the media query for the specific device and remove/comment out that section.

例如，移除纵向平板电脑看起来像(在 bootstrap-responsive.css 中):

For example, removing the portrait tablet one would look like (in bootstrap-responsive.css):

/* some CSS code above this */

.hidden-desktop {
  display: none !important;
}

/* comment out the following rule entirely in order to disable it */
/*
@media (max-width: 767px) {
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}*/ /* stop commenting out, we want everything below this */

@media (min-width: 768px) and (max-width: 979px) {
  .visible-tablet {
    display: inherit !important;
  }

/* More CSS code follows */

要找出哪个 @media 查询对应于哪个设备宽度，请查看 http://twitter.github.com/bootstrap/scaffolding.html#responsive;媒体查询以及它们对应的设备大小在那里给出.

To find out which @media query corresponds to which device width, take a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive; the media queries are given there along with the device sizes they correspond to.

这篇关于禁用 Twitter Bootstrap 响应式布局之一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！