twitter-bootstrap – 禁用一个Twitter Bootstrap响应布局

发布时间：2020-12-18 00:17:37 所属栏目：安全来源：网络整理

导读：我想禁用其中一个响应布局.无论第二小的布局是否切换到移动视图. 解决方法如果您正在从LESS文件中进行编译,这很简单.打开响应无关,在“MEDIA QUERIES”下注释或删除@import声明,无论您不想要哪个布局.例如,如果您不希望平板电脑使用普通桌面,代码如下所示：

我想禁用其中一个响应布局.无论第二小的布局是否切换到移动视图.

解决方法

如果您正在从LESS文件中进行编译,这很简单.打开响应无关,在“MEDIA QUERIES”下注释或删除@import声明,无论您不想要哪个布局.例如,如果您不希望平板电脑使用普通桌面,代码如下所示：

// 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,你应该完成.

另一方面,如果您不是直接从引导编译,并且直接使用引导响应css,则可以搜索特定设备的媒体查询,并删除/注释该部分.

例如,删除纵向平板电脑就像(在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;在那里给出媒体查询以及它们对应的设备大小.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!