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

Question

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

Answer 1

如果你是从 LESS 文件编译的，这很容易。打开responsive.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，您应该就完成了。

另一方面，如果您不是从bootstrap.less编译而是直接使用bootstrap-responsive.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;媒体查询以及它们对应的设备大小在那里给出。

Answer 2

使用 LESS 时，对 spinningarrow 执行此操作的方式的改进是将@gridColumnWidth768和@gridGutterWidth768设置为匹配@gridColumnWidth和@gridGutterWidth，如下所示：

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

通常，我尝试不理会供应商文件，仅将其作为最后的手段进行编辑。这使我无需编辑核心引导程序文件即可解决此问题。

Answer 3

• 在引导程序调用后调用您的 CSS。
• 在你的 css 中复制行，span css 形成你想要的布局，并将其放在你的 css 中。
• 将媒体查询更改为如下所示（最大宽度是您喜欢坚持的宽度）：

@media (max-width: 1200px) {
    .row {
        margin-left: -30px;
        *zoom: 1;
    }
    .row:before,
    .row:after {
        display: table;
        content: "";
        line-height: 0;
    }
    .row:after {
        clear: both;
    }
    [class*="span"] {
        float: left;
        margin-left: 30px;
    }
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 1170px;
    }
    .span12 {
        width: 1170px;
    }
    .span11 {
        width: 1070px;
    }
    .span10 {
        width: 970px;
    }
    .span9 {
        width: 870px;
    }
    .span8 {
        width: 770px;
    }
    .span7 {
        width: 670px;
    }
    .span6 {
        width: 570px;
    }
    .span5 {
        width: 470px;
    }
    .span4 {
        width: 370px;
    }
    .span3 {
        width: 270px;
    }
    .span2 {
        width: 170px;
    }
    .span1 {
        width: 70px;
    }
    .offset12 {
        margin-left: 1230px;
    }
    .offset11 {
        margin-left: 1130px;
    }
    .offset10 {
        margin-left: 1030px;
    }
    .offset9 {
        margin-left: 930px;
    }
    .offset8 {
        margin-left: 830px;
    }
    .offset7 {
        margin-left: 730px;
    }
    .offset6 {
        margin-left: 630px;
    }
    .offset5 {
        margin-left: 530px;
    }
    .offset4 {
        margin-left: 430px;
    }
    .offset3 {
        margin-left: 330px;
    }
    .offset2 {
        margin-left: 230px;
    }
    .offset1 {
        margin-left: 130px;
    }
}

Answer 4

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

（当然，您必须小心，在更新 Bootstrap 时不要重新启用它们。