在所有屏幕尺寸上保留导航项答案

【问题标题】：Keep navigation items on all screen sizes在所有屏幕尺寸上保留导航项
【发布时间】：2016-02-09 16:41:48
【问题描述】：

我正在尝试构建一个引导导航栏，其中左侧有导航链接，右侧有一些用户图标。
在移动设备上，导航链接应折叠，但图标应留在（甚至居中？）到汉堡图标。

在桌面上看起来不错（宽度 > 768px）。但在较小的宽度上，图标显示在彼此下方而不是彼此相邻。

到目前为止，这是我的代码：

<nav class="navbar navbar-inverse navbar-fixed-top bo-header">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">MY BRAND</a>
    </div>
    <!-- non-collapsing items -->
    <div class="navbar-header navbar-right">
      <ul class="nav navbar-nav">
        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
        <li><a href="#"><i class="fa fa-users"></i></a></li>
        <li><a href="#"><i class="fa fa-wrench"></i></a></li>
      </ul>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Nav Entry 1</a></li>
        <li><a href="#">Nav Entry 2</a></li>
        <li><a href="#">Nav Entry 3</a></li>
        <li><a href="#">Nav Entry 4</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

工作jsfiddle： http://jsfiddle.net/n9KtL/188/

感谢您的帮助！

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这是一个示例，说明如何将图标保留在导航栏 container 内（因此 navbar 内的所有元素保持一致），然后将图标放置在 768 像素以下的视口中保持显示。

@media (max-width: 767px) {
  .navbar .navbar-right.navbar-top {
    position: absolute;
    margin-top: 4px;
    right: 80px;
  }
  .navbar .navbar-right.navbar-top > li {
    display: inline-block;
  }
  .navbar .navbar-right.navbar-top > li > a {
    padding-right: 10px;
    padding-left: 10px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top bo-header">
  <div class="container">
    <ul class="nav navbar-nav navbar-right navbar-top">
      <li><a href="#"><i class="fa fa-envelope"></i></a>
      </li>
      <li><a href="#"><i class="fa fa-users"></i></a>
      </li>
      <li><a href="#"><i class="fa fa-wrench"></i></a>
      </li>
    </ul>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">MY BRAND</a>
    </div>
    <!-- non-collapsing items -->
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Nav Entry 1</a>
        </li>
        <li><a href="#">Nav Entry 2</a>
        </li>
        <li><a href="#">Nav Entry 3</a>
        </li>
        <li><a href="#">Nav Entry 4</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：