Question

我正在使用导航栏示例：

<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>

但是当屏幕输入宽度为261px时，可折叠按钮会按下网站的标题，使事情变得尴尬。我试着包装＆＃34;标签＆＃34;有一个列，但只是放了一个单词。

Answer 1

261px极其狭窄 - 很少有现代设备如此低分辨率，用户通常不希望网站的内容在这个尺寸上可用或可读。

所以我建议完全忽略这个问题（比如Bootstrap本身那样）或者像这样在CSS中设置最小宽度（取决于你的其他标记和样式，你可能想要将body更改为最外层容器的选择器）：

body {
   min-width: 280px;
}

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

如果你绝对必须支持这种狭隘的观点，你可以向CSS添加新的媒体查询，如：

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

...根据需要缩小标题大小。

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

1 个答案: