twitter bootstrap 屏幕大小逻辑和最佳实践

【问题标题】：twitter bootstrap screen size logic and best practicestwitter bootstrap 屏幕大小逻辑和最佳实践
【发布时间】：2013-07-31 19:41:38
【问题描述】：

我正在使用 Bootstrap 3 构建响应式网站。

这是桌面版本（仅包含标题）：

这里是移动版：

使用 Bootstrap 3 实现这样的布局更改的概念是什么，是使用网格类还是媒体查询？

我非常感谢简短的例子。

谢谢

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以像这样使用响应式实用程序“hidden-lg”（隐藏在桌面上）和“hidden-sm”（隐藏在平板电脑/手机上）CSS 类......

<div class="navbar navbar-inverse hidden-sm">
      <div class="container">
        .. menu here
    </div>
</div>
<div class="hidden-lg text-center">
  <!--custom select menu here-->
  <select><option>Contact Us</option><option>About</option><option>Link</option</select>
</div>

演示：http://www.bootply.com/70810

但是，更典型的 Bootstrap “要做的事情”是使用 nav-collapse 在较小的设备上折叠菜单：

http://www.bootply.com/cskelly/70636

【讨论】：