Twitter bootstrap 禁用一个Twitter引导响应布局

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

如果您是从较少的文件编译，这是非常容易的。打开

responsive.less

并在“

媒体查询

”下注释掉或删除您不需要的任何版面的

@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

，就可以完成了

另一方面，如果您不是从

bootstrap.less

编译，而是直接使用

bootstrap responsive.css

，则可以搜索特定设备的媒体查询并删除/注释该部分

例如，卸下人像平板电脑（在

bootstrap responsive.css

中）看起来像：

要找出哪个

@media

查询对应于哪个设备宽度，请查看；媒体查询连同它们对应的设备大小一起给出。

• 在引导调用之后调用css
• 在css中复制行，跨css形成所需的布局并将其放置在css中
• 将媒体查询更改为类似以下内容（最大宽度是您希望坚持的宽度）：

@介质（最大宽度：1200px）{
.行{
左边距：-30px；
*缩放：1；
}
.罗：之前，
.罗：之后{
显示：表格；
内容：“；
线高：0；
}
.罗：之后{
明确：两者皆有；
}
[类别*=“范围”]{
浮动：左；
左边距：30px；
}
.货柜，
.导航栏静态顶部。容器，
.导航栏固定顶部。集装箱，
.导航栏固定底部。集装箱{
宽度：1170px；
}
.span12{
宽度：1170px；
}
.span11{
宽度：1070px；
}
.span10{
宽度：970px；
}
.span9{
宽度：870px；
}
.span8{
宽度：770px；
}
.span7{
宽度：670px；
}
.span6{
宽度：570px；
}
.span5{
宽度：470px；
}
.span4{
宽度：370px；
}
.span3{
宽度：270px；
}
.span2{
宽度：170px；
}
.span1{
宽度：70px；
}
.抵销额12{
左边距：1230px；
}
.抵销11{
左边距：1130px；
}
.抵销额10{
左边距：1030px；
}
.抵销额9{
左边距：930px；
}
.抵销额8{
左边距：830像素；
}
.抵销额7{
左边距：730px；
}
.抵销6{
左边距：630px；
}
.抵销5{
左边距：530px；
}
.抵销4{
左边距：430px；
}
.抵销3{
左边距：330px；
}
.抵销2{
左边距：230像素；
}
.抵销额1{
左边距：130像素；
}
}

如果你不想编译得更少，我发现最好的方法就是进入bootstrap.css并注释掉你不想激活的大小。CSS组织得很好，禁用其中一个大小似乎不会影响其他任何东西

（当然，在更新引导程序时，您必须小心不要重新启用它们。）

作为一种改进，在使用LESS时，可以将

@gridColumnWidth768

和

@gridGutterWidth768

设置为匹配

@gridColumnWidth

和

@gridGutterWidth

，如下：

@gridColumnWidth768: @gridColumnWidth;
@gridGutterWidth768: @gridGutterWidth;

---

作为一项规则，我尽量不去理会供应商文件，而只是在万不得已的情况下编辑它们。这使我可以在不编辑核心引导文件的情况下解决此问题。

这就是我最后尝试的。奇怪的是，我试着评论每一个版本，但没有一个关闭了我想要关闭的版本。这很奇怪。这是在less文件中还是

引导响应的

？正是我想要的-谢谢（几乎完全正确；我也想禁用1200px最小的一个），我也想禁用1200px的一个。我正在使用gem和Rails。由于bootstrap-responsive.scss文件只有7行长，因此我将其复制到我的app/assets/stylesheets并包含我的版本，其中注释了

@import“bootstrap/responsive-1200px-min”

行。所有这些解决方案都意味着每次发布新引导时都要重新访问。请参阅下面@TravMcKinney的答案。这是首选，因为您不必修改引导文件本身。

@gridColumnWidth768: @gridColumnWidth;
@gridGutterWidth768: @gridGutterWidth;