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

Question

我正在设计使用自举流体布局。这是我的设计： 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

Answer 1

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

1]响应式效用类

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

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

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

  

if $（window）.width（）＆lt; 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%; 
    }
}