脚手架和电网系统

我目前使用引导脚手架/电网系统如下：脚手架和电网系统

<div class="row-fluid"> 
    <div id="insta-shop-filter" class="span2 visible-desktop"> 

    </div> 
    <div id="insta-shop-grid" class="span10"> 

    </div> 
<div>

正如你可以看到我添加了可见桌面insta-shop-filter所以，这将消失在非桌面。然而，我想要做的是，当这消失，我想insta-shop-grid有一个span12，所以它需要全宽。有没有办法做到这一点，而不必使用javascript/jQuery和侦听窗口事件？

来源

2013-10-06 adit

您可以使用CSS3媒体查询在不同设备上切换样式。在这种情况下，你可能会考虑编写基于该做的东西像下面这样的640像素或480像素设备宽度媒体查询：

@media screen and (max-device-width:640px){ 
    #insta-shop-filter{ 
    display:none; 
    } 
    #insta-shop-grid{ 
    width:640px!important; 
    } 
}

一个小纸条，在这里，使用重要的是鼓励！

来源

2013-10-06 02:13:51 Conqueror

这是如何将班级从span10改为span12的？因为这就是我想要的 – adit

它不会但它会覆盖span10的宽度属性，有效地给你一个完整的宽度，而不是宽度的10/12 – Conqueror

在引导程序2中（它看起来你正在使用）我不认为有一个简单的方法来做到这一点，而不需要用自定义的CSS媒体查询（如@Conqueror建议的）重写样式或添加/删除类JavaScript的。

但是我只想指出，这是通过使用col-SIZE-SPAN作为documented here烘焙到Bootstrap3中。在你的情况下，它会。

<div class="row-fluid"> 
    <div id="insta-shop-filter" class="col-md-2 hidden-sm"> 

    </div> 
    <div id="insta-shop-grid" class="col-md-10 col-sm-12"> 

    </div> 
<div>

来源

2013-10-06 03:38:50 kalhartt

脚手架和电网系统

回答

相关问题