导航中的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;
  }
}

编辑：

小提琴： https://jsfiddle.net/895xsgy1/4/

Answer 1

尝试删除HTML文件中的以下代码：

<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">

并使用如下：

<nav class="navbar navbar-default" role="navigation">
 <div>
 <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">.....</li>
      </ul>
  </div>
</nav>

修改：已更新 DEMO

尝试与您的代码一起添加以下代码：

@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
        max-width:90% !important;
        margin:0 auto !important;
    }
    .navbar-nav > li {
        max-width:80%;
        display:block;
        text-align: center !important;
        margin:0 auto !important;           
     }
     .navbar-nav > li select {
        text-align: center !important;
        margin:0 auto !important;
        width:100%;
    }
}

Answer 2

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

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

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