bootstrap.css - 如何在移动时隐藏侧边栏？答案

【问题标题】：bootstrap.css - How to hide sidebar when mobile?bootstrap.css - 如何在移动时隐藏侧边栏？
【发布时间】：2013-07-11 15:52:36
【问题描述】：

我正在尝试使用 bootstrap.css 实现布局。它尤其是带有右侧边栏的主视图。它在桌面上看起来很棒，但是当我有移动视图时，我试图删除侧边栏。目前我的布局如下所示：

<div class="container-fluid">
   <div class="row-fluid">
      <div class="span9">
         Main view goes here
      </div>
      <div class="span3 visible-desktop visible-tablet hidden-phone">
         Sidebar goes here
      </div>
   </div>
</div>

所以当我有一个移动视图时，侧边栏消失了。但是主视图仍然有一个 span9 类，导致整个视图在右侧有一些空白。我目前正在 iPhone 4 上使用移动 safari 体验此功能。

我不是 css 大师，我主要在 webapps 的后端工作，但这次我只想把它做好，因为它是为了我的个人博客。你可以在my blog 看看我对这个“空白”的意思。我知道导航栏现在一点也不漂亮，但这将是我接下来要解决的问题。

【问题讨论】：

标签： css mobile twitter-bootstrap

【解决方案1】：

查看www.responsinator.com 我想右边没有这样的空白。此外，row-fluid 类引导程序将每个子类span 转换为全角，当站点在除桌面以外的任何其他设备上打开时。所以无论如何，当你在 iPhone4 上打开 width:100% 时，它会被分配给 span9。

右边似乎有一点空间，可能有两个原因：
1.文字不合理。
2.container-fluid向左和向右添加20px的内边距。

希望对您有所帮助。 :)

【讨论】：