Bootstrap，对布局进行响应式更改 [英] Bootstrap, making responsive changes to layout

问题描述

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

<div class="span4"></div><div class="span8"></div>

隐藏span4而让span8占据整个宽度的最佳方法是什么，以便在屏幕变小时时使用?

解决方案

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

然后，将 .span8 添加到 .span12 的规则中，用于隐藏 .span4 宽度以下的所有内容，因为所有工作都已经完成通过引导程序为您完成，因此无需复制.它看起来像这样:

@media(最小宽度:320px){.span12，.span8 {宽度:300px；}}

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

希望有帮助:)

这可行，我使用引导站点上的开发工具对其进行了测试，并且似乎可行.同样，在媒体查询中:

@media(最小宽度:320px){#special .span4 {显示:无；}#special .span8 {浮动:无；宽度:自动；}}

I'm using a fluid Twitter Bootstrap layout for my design and am about to make it responsive. Consider a grid such as this:

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

What is the best way to hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?

解决方案

Using a media query with whatever min/max width set .span4 to display: none;

Then, add .span8 to the rule for .span12 for everything below whatever width you hide .span4 as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like this:

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

(That last bit of code is just an example, but there will be something like it in bootstraps scaffolding.)

Hope that helps :)

EDIT:

This could work, I tested it using dev tools on the bootstrap site and it seemed to work. Again, in a media query:

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

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

}

这篇关于Bootstrap，对布局进行响应式更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！