2

我目前正在使用引导脚手架/网格系统，如下所示：

<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 和监听窗口事件？

4

2 回答 2

0

在 bootstrap 2（您似乎正在使用）中，我认为没有一种简单的方法可以做到这一点，而无需使用自定义 CSS 媒体查询（如建议的@Conqueror）覆盖样式或在 javascript 中添加/删除类。

但是，我只想指出，这是通过使用此处记录col-SIZE-SPAN的方法将其烘焙到 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-06T03:38:50.793 回答
0

您可以使用 CSS3 媒体查询在不同设备上切换样式。在这种情况下，您可能会考虑编写基于 640px 或 480px 设备宽度的媒体查询，执行如下操作：

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

这里有一个小提示，不鼓励使用 !important。

于 2013-10-06T02:13:51.350 回答