Bootstrap,对布局进行响应式更改

Question

我正在为我的设计使用流畅的Twitter Bootstrap布局,并且即将使其响应.考虑这样的网格:

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span8"></div>    
</div>

隐藏span4的最佳方法是什么,让span8占据整个宽度,在屏幕变小时使用？

Answer 1

使用bootstrap 2.0.2及更高版本,您可以:

将html更改为:

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8 span12-tablet"></div>    
</div>

(我用平板电脑和手机大小解释'较小',对其他尺寸使用自己的定义)

.hidden-phone和.hidden-tablet隐藏了较小屏幕的span4.

要回收该空间并重新跨越span8,请将其添加到您的css:

@media (max-width: 979px) {
  .span12-tablet {
    width: 91.48936170212765% !important;
    *width: 91.43617021276594% !important;
  }
}

如果你碰巧使用的更少,你可以使用bootstrap的网格混合:

.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}

Answer 2

使用设置.span4为的最小/最大宽度的媒体查询display: none;

然后,.span8为.span12你所隐藏的任何宽度下的所有内容添加规则,因为.span4bootstrap已经为你完成了所有工作,所以不需要复制.它看起来像这样:

@media (min-width: 320px){
    .span12,
    .span8 {
        width: 300px;
    }
}

(最后一点代码只是一个例子,但在bootstraps脚手架中会有类似的东西.)

希望有帮助:)

编辑:

这可以工作,我在bootstrap网站上使用开发工具测试它,它似乎工作.同样,在媒体查询中:

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

    #special .span8 {
        float: none;
        width: auto;
    }

}

Answer 3

如果使用bootstrap 2.2.1,您可以:

将html更改为:

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8"></div>    
</div>

现在将此添加到您的css覆盖:

@media (min-width: 768px) and (max-width: 979px) 
{
    [class*="span"],
    .row-fluid [class*="span"] {
        display: block;
        float: none;
        width: 100%;
        margin-left: 0;
    }
}

这也适用于您在html中指定的任何其他跨度宽度.

这些更改的效果使得所有跨度宽度均为100%,导致iPad在纵向模式下始终使用1列流体模式.