我正在设计使用自举流体布局。这是我的设计: 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
答案 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%;
}
}