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，我发现的最好的方法是进入bootstrap.css并注释掉你不希望活动的大小。 CSS非常有条理，禁用其中一种尺寸似乎不会影响任何其他内容。

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

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

4 个答案: