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

Question

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

以下是桌面版（仅包含标题）：

以下是移动版：

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

我非常感谢简短的例子。

谢谢

Answer 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