禁用其中一个Twitter Bootstrap响应式布局

Question

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

Answer 1

如果您正在编译LESS文件,这很容易.打开responsive.less并在" MEDIA QUERIES"注释掉或删除@import您不想要的任何布局的声明.例如,如果您不希望Tablets为常规桌面,则代码如下所示:

// 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完成.

另一方面,如果您没有直接编译bootstrap.less并且正在使用bootstrap-responsive.css,则可以搜索特定设备的媒体查询并删除/注释掉该部分.

例如,删除肖像平板电脑就像(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 ; 媒体查询与它们对应的设备大小一起给出.