16

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

4

4 回答 4

12

如果您从 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直接使用，则可以搜索特定设备的媒体查询并删除/注释掉该部分。

例如，移除纵向平板电脑看起来像（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；媒体查询与它们对应的设备大小一起在那里给出。

于 2012-05-31T20:02:21.230 回答
3

作为 spinarrow 使用 LESS 时执行此操作的一种改进，将and 设置@gridColumnWidth768为@gridGutterWidth768匹配@gridColumnWidth，@gridGutterWidth如下所示：

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

作为一项规则，我尽量不理会供应商文件，只在万不得已时才编辑它们。这使我无需编辑核心引导文件即可解决此问题。

于 2013-04-11T21:57:07.947 回答
0
  • 在引导调用之后调用你的 CSS。
  • 在您的 css 复制行中，跨 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;
    }
}
于 2012-09-01T18:37:07.517 回答
-1

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

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

于 2013-02-08T21:49:40.420 回答