html - Bootstrap 禁用导航中的下拉按钮

Question

我有一个看起来像这样的导航:

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
   </div>

   <div class="collapse navbar-collapse  navbar-ex1-collapse">
      <ul class="nav navbar-nav">
         <li class="dropdown">
                <form method="post" action="">          
                    <select class="form-control" name="year" onchange="this.form.submit()">
                        <option value="" disabled selected>Select Year</option>
                        <?php
                        $date = date("Y");
                        for($i = 2010; $i < $date+1; $date--){
                        echo '<option value="'.$date.'">'.$date.'</option>';
                        }
                        ?>
                    </select>
                    <noscript><input type="submit" value="Submit"></noscript>
                </form> 
        <form method="post" action="">
      </li>
         <li class="dropdown">
        <a href="january.php" data-toggle="collapse" data-target="#one">January</a>
      </li>
      <li class="dropdown">
        <a href="february.php" data-toggle="collapse" data-target="#two">February</a>
      </li>
      <li class="dropdown">
        <a href="march.php" data-toggle="collapse" data-target="#three">March</a>
      </li>
      <li class="dropdown">
        <a href="april.php" data-toggle="collapse" data-target="#three">April</a>
      </li>
      <li class="dropdown">
        <a href="may.php" data-toggle="collapse" data-target="#three">May</a>
      </li>
      <li class="dropdown">
        <a href="june.php" data-toggle="collapse" data-target="#three">June</a>
      </li><li class="dropdown">
        <a href="july.php" data-toggle="collapse" data-target="#three">July</a>
      </li><li class="dropdown">
        <a href="august.php" data-toggle="collapse" data-target="#three">August</a>
      </li><li class="dropdown">
        <a href="september.php" data-toggle="collapse" data-target="#three">September</a>
      </li>
      <li class="dropdown">
        <a href="october.php" data-toggle="collapse" data-target="#three">October</a>
      </li>
      <li class="dropdown">
        <a href="november.php" data-toggle="collapse" data-target="#three">November</a>
      </li>
      <li class="dropdown">
        <a href="december.php" data-toggle="collapse" data-target="#three">December</a>
        </li>
      </ul>
  </div>
</nav>

在我调整浏览器大小之前，结果看起来不错。当它变小时，它看起来像这样:

该按钮工作正常，但我想禁用它，因此它始终显示导航而无需按下按钮。

我该怎么做？

CSS:

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}

编辑:

fiddle : https://jsfiddle.net/895xsgy1/4/

Answer 1

Bootstrap 可让您自定义导航栏从折叠状态切换到完整状态时的宽度。它由 .less 源文件中的 @grid-float-breakpoint 变量控制。

如果您不使用 less 源文件，您可以在此处下载自定义版本的 css:http://getbootstrap.com/customize/您需要在此页面上搜索 @grid-float-breakpoint 并进行编辑。

有关详细信息，请参阅文档 http://getbootstrap.com/components/#navbar