Bootstrap导航栏更正

Question

我的导航栏出现了问题，我正在使用bootstrap。

1. 搜索表单背后有很多未使用的空间，我怎么能摆脱它呢？
2. 我可以让导航栏尽快折叠，它会生成2行导航栏吗？
＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

Answer 1

导航栏将根据您设置的屏幕大小折叠。现在你正在链接到CDN，所以你必须覆盖CSS的@media部分。

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

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