如果屏幕尺寸为768px iPad纵向视图,则尝试编写@media屏幕,然后右列叠加

时间:2013-05-02 16:05:25

标签: html css twitter-bootstrap responsive-design

我正在设计使用自举流体布局。这是我的设计: http://www.getaveo.com/_bootstrap4/_delete.html

我有:

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

我希望这发生......

1 of 2)如果屏幕尺寸为768px iPad纵向视图,我正在尝试编写@media屏幕,然后:

右列,span3(红色)堆叠,变为100%。 橙色柱,span6(橙色)向上扩展或扩展到右边缘。或者span6成为span9。 左列,span3(灰色)保持不变。

或者它变成这样:

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

2)现在再次查看_delete html ...

使您的浏览器窗口更小,如480px宽或更小,当前的跨度堆栈如下:

gray
orange
red

我想要做的是:如果屏幕尺寸类似于iphone横向视图480px或更小,则订单应为:

orange
gray
red

1 个答案:

答案 0 :(得分:1)

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

1]响应式效用类

如果您的整个网站只有一个用例,则可以使用.visible-tablet.visible-phone等等类explained here。这里的缺点是沉重的HTML,但它很简单。工作示例:http://www.bootply.com/60542

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

我不介意非CSS解决方案,你可以使用jQuery来相应地更改类。 (您也可能在window.width()中遇到跨浏览器问题!)例如,

  

if $(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%; 
    }
}