0

I am designing playing around with bootstrap fluid layout. Here is my design: http://www.getaveo.com/_bootstrap4/_delete.html

I have:

span3 (gray)
span6 (orange)
span3 (red)

I would like this to happen...

1 of 2) I am trying to write @media screen if screen size is 768px iPad portrait view, then:

Right column, span3 (red) stack down, and becomes 100%. Orange column, span6 (orange) expands over or widen over more to the right edge. Or span6 becomes span9. Left column, span3 (gray) stays the same.

Or it becomes something like this:

http://www.getaveo.com/_bootstrap4/_delete2.html

2) Now view _delete html again...

Make the your browser window smaller like 480px wide or smaller, the span currently stacks like this:

gray
orange
red

What I would like to do is: if screen size is like iphone landscape view 480px or smaller, then, the order should be:

orange
gray
red
4

1 回答 1

1

有几种不同的方法可以解决这个问题..

1]响应式实用程序类

如果您的整个站点只有一个用例，则可以使用此处解释.visible-tablet的、.visible-phone等类。这里的缺点是繁重的 HTML，但做起来相当简单。工作示例： http: //www.bootply.com/60542

2] 使用 jQuery/Javascript 监控窗口宽度

我是您不介意非 CSS 解决方案，您可以使用 jQuery 相应地更改类。（window.width() 也可能存在跨浏览器问题！）例如，

如果 $(window).width() < 980) {

 $('#myRow').removeClass('span6').addClass('span9');

}; ...

3] 使用@media 查询覆盖 Bootstrap CSS

例如，此查询会将您的 .row-fluid .span6 更改为 .row-fluid .span9 的宽度（在 bootstrap.css 中找到）

@media (max-width: 979px) and (min-width: 768px) { /*tablet*/
    .row-fluid .span6 {
    width: 74.46808510638297%; 
    }
}
于 2013-05-03T09:59:42.260 回答