Html Bootstrap可折叠按钮向下推动品牌元素

我使用的是navbar示例：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Create Single Page</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>


  </div><!-- /.navbar-collapse -->
</nav>

切换导航

---

但当屏幕宽度达到261像素时，可折叠按钮会向下推网站的标题，这让事情看起来很尴尬。我试着用一个列来包装“a标签”，但只是换了个字。

261px非常窄——很少有现代设备的分辨率如此低，用户通常不希望网站的内容在这种大小下可用或可读

因此，我建议要么完全忽略这个问题（就像引导本身一样），要么像这样在CSS中设置一个最小宽度（取决于标记和样式的其余部分，您可能希望将

body

更改为最外层容器的选择器）：

当页面宽度低于280px时，它将添加水平滚动条，而不是尝试响应到目前为止减小的大小

如果您必须支持如此狭窄的视图，您可以向CSS添加新的媒体查询，如：

@media screen and (max-width: 270px) {
   // tiny styles for your site logo here, e.g.:
   .navbar-brand {
      font-size: 0.5em;
   } 
}

…根据需要缩小标题的大小

@media screen and (max-width: 270px) {
   // tiny styles for your site logo here, e.g.:
   .navbar-brand {
      font-size: 0.5em;
   } 
}