强制Bootstrap导航栏元素水平显示

Question

我试图保留在大型设备上根据需要呈现的两个菜单元素（Home icon和Foo）的位置：

但是在移动设备上显示为行（模糊内容）：

有没有办法强制将这两个菜单项显示在“品牌”菜单的右侧，并显示在同一行＆＃39;？

示例：http://www.bootply.com/Fjq7ZXSDXc#

Answer 1

您可以在navbar-header内创建单独的div：请参阅示例代码段。

＆＃13;

＆＃13;

.navbar-header .nav-icons {
  padding-top: 12px;
  position: absolute;
  display: inline-block;
  top: 0;
}
.navbar-header .nav-icons span {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 20px
}
.navbar-header .nav-icons a {
  color: #fff;
  text-decoration: none;
}

＆＃13;

<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" rel="home" href="#" title="Help"> Brand</a>

      <div class="nav-icons">
        <a href="#"> <span class="glyphicon glyphicon-home"></span>
        </a>
        <a href="#"> <span> Foo</span>
        </a>

      </div>
    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse-1">
      <!-- Non-collapsing right-side icons -->
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="text-center">
    <h1>Bootstrap starter template</h1>

    <p class="lead">Use this document as a way to quickly start any new project.
      <br>All you get is this text and a mostly barebones HTML document.</p>
  </div>
</div>
<!-- /.container -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试在.css中添加此内容

.nav-collapse .nav > li {
    display: inline-block;
}