如何使用Twitter Bootstrap做这个简单的响应式布局？ [英] How to do this simple Responsive Layout using Twitter Bootstrap?

问题描述

请看看这个：

[删除]

当您调整浏览器大小时，从一行中的3个盒子直接到每行1个盒子。如果我决定使用twitter bootstrap响应式网格，不确定在布局选项中我是否受限制就像你有时使用其他的CSS网格框架一样（例如限制在960px宽的设计中）。

注意，但如果你真的需要这样做，这里有一些让你开始：直播例如和 jsfiddle

随着页面布局变得越来越复杂，并且添加更多的Bootstrap组件，您将不得不添加到自定义CSS的例外列表中，这可能很好，以保持简单;）

祝你好运！

CSS

  @media（min-width：481px）和（max-width：767px）{
 
 .row-fluid [class * =span] {/ *对于上述观点，力跨度为50％* / 
 width：48.717948717948715％; 
 
 float：left; 
} 
 
 .row-fluid .span12 {/ *覆盖所以span12是全宽* / 
宽度：100％; 
保证金 - 右：0！重要; 
} 
 
 
 .row-fluid [class * =span]：first-child {
 margin-left：0; 
保证金权利：2.5109110747408616％; 
} 
 
 .row-fluid [class * =span]：last-child {
 float：right; 
} 
 
} 
  

Please take a look at this:

[removed]

When you resize the browser, it goes from 3 boxes on one line straight to 1 per line. Is there a way to make it go to 2 per line before going to 1?

Not sure if I am limited in layout options if I decide to use twitter bootstrap responsive grids like you sometimes are with other CSS grid frameworks (for example being limited to 960px wide designs with some).

解决方案

I like Zaid's cautionary note, though if you really need to do this, here's something to get you started: Live example and jsfiddle

As your page layout becomes more complex and as you add more Bootstrap components, the list of exceptions you will have to add to the custom CSS with snowball, so probably good to keep it simple ;)

Good luck!

CSS

@media(min-width:481px) and (max-width:767px){

.row-fluid [class*="span"]{   /* for the above viewpoints, force spans to be 50% */ 
width:48.717948717948715%;

float:left;
}

.row-fluid .span12{    /* override so span12 is full width */
width:100%;
margin-right:0 !important;
}


.row-fluid [class*="span"]:first-child {
margin-left: 0;
 margin-right: 2.5109110747408616%;
}

.row-fluid [class*="span"]:last-child {
float:right;
}

}

这篇关于如何使用Twitter Bootstrap做这个简单的响应式布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！