html - Twitter bootstrap 中的脚手架和网格系统

Question

我目前使用的 Bootstrap 脚手架/网格系统如下:

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

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

    </div>
<div>

如您所见，我将 visible-desktop 添加到 insta-shop-filter 以便它在非桌面上消失。然而，我想做的是，当它消失时，我希望 insta-shop-grid 有一个 span12，所以它占据了整个宽度。有没有一种方法可以做到这一点而不必使用 javascript/jQuery 和监听窗口事件？

Answer 1

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

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

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