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

问题描述

我使用流动的Twitter Bootstrap布局为我的设计，并准备使其响应。考虑这样的网格：

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

隐藏span4的最佳方式是什么，让span8占用整个宽度，

使用具有任何最小/最大宽度集合的媒体查询 .span4

/ code>到 display：none;

然后，添加 .span8 .span12 为 .span12 那个工作已经通过bootstrap为你完成了，所以不需要重复。它看起来像这样：

  @media（min-width：320px）{
 .span12，
 .span8 {
 width：300px; 
} 
} 
  

（最后一位代码只是一个例子，但

希望有助于：）

EDIT：

这可以工作，我使用开发工具在引导网站测试它，它似乎工作。再次，在媒体查询：

  @media（min-width：320px）{
 
＃ special .span4 {
 display：none; 
} 
 
 #special .span8 {
 float：none; 
 width：auto; 
} 
 
} 
  

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;
    }

}

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