Bootstrap 导航栏更正答案

【问题标题】：Bootstrap navbar correctionsBootstrap 导航栏更正
【发布时间】：2017-06-08 20:29:27
【问题描述】：

我用引导程序制作的导航栏有问题。

搜索表单后面有很多未使用的空间，我该如何摆脱它？
我可以让导航栏折叠成两行导航栏吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    <a class="navbar-brand" href="index.php">&nbsp;Name&nbsp;</a>
  </div>
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-folder-open" style="color: white"></span> <img src="img/flags/country.png"> <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">something
            <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">something
            <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">something
            <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user" style="color: white"></span>admin
            <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-right form-inline">
      <span class="label label-default">label 1</span>
      <div class="input-group col-sm-2">
        <input type="text" class="form-control input-sm" style="border-radius: 10px 0 0 10px;">
        <div class="input-group-btn">
          <button class="btn btn-default btn-sm" type="submit" style="border-radius: 0 10px 10px 0;">
                        <i class="glyphicon glyphicon-search"></i>
                    </button>
        </div>
      </div>
      <span class="label label-default">label 2</span>
      <div class="input-group col-sm-2">
        <input type="text" class="form-control input-sm" style="border-radius: 10px 0 0 10px;">
        <div class="input-group-btn">
          <button class="btn btn-default btn-sm" type="submit" style="border-radius: 0 10px 10px 0;">
                        <i class="glyphicon glyphicon-search"></i>
                    </button>
        </div>
      </div>
      <span class="label label-default">label 3</span>
      <div class="input-group col-sm-2">
        <input type="text" class="form-control input-sm" style="border-radius: 10px 0 0 10px;">
        <div class="input-group-btn">
          <button class="btn btn-default btn-sm" type="submit" style="border-radius: 0 10px 10px 0;">
                        <i class="glyphicon glyphicon-search"></i>
                    </button>
        </div>
      </div>
    </form>
  </div>
</nav>

https://jsfiddle.net/nooorz24/ove78e91/1/

【问题讨论】：

标签： css twitter-bootstrap navbar

【解决方案1】：

导航栏将根据您设置的屏幕尺寸折叠。现在您正在链接到 CDN，因此您必须覆盖 CSS 的 @media 部分。

额外的空间也需要被覆盖。看起来它在样式表中：

@media (min-width: 768px)
navbar.less:385
.navbar-right {
    float: right!important;
    margin-right: -15px;
}

【讨论】：