選択したコンボボックス付きのBoostrap折りたたみナビ

Question

私は、デフォルトのブレークポイントを持つ固定トップナビゲーションバーを使用しています。 select要素は折りたたまれていないときには見栄えが良いが、折りたたまれた部分では正しく配置されていない。

HERESに私のコード：

<nav id="mainNav" class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#" data-toggle="modal" data-target="#myModal">Symbols</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Navigation <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       < 
       <li> 
        <a href="#">Leave<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
        <li><a href='new_leave.php'>New leave</a></li> 
        <li><a href='leave_search.php'>Search</a></li> 
        <li><a href='approve_search.php'>Approve</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">User<span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
        <li><a href="user_search.php">Search</a></li> 
        <li><a href="activate_user.php">Activate/Deactivate/Delet</a></li> 
        <li><a href="teams.php">Teams</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">News<span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
        <li><a href="add_news.php">Add</a></li> 
        <li><a href="edit_news.php">Edit/Delete </a></li> 
        </ul> 
       </li> 
       <li> 
        <a>Download<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
        <li><a href="add_download.php">Add</a></li> 
        <li><a href="edit_download.php">Edit/Delete</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Reports<span class="caret"></a> 
        <ul class="dropdown-menu"> 
        <li><a href='reports.php'>Reports</a></li> 
        <li><a href="comparison.php">Comparison</a></li> 
        <li><a href='export.php'>Export to Excel</a></li> 
        <li><a href='export_names.php'>Export Employee List to Excel</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Settings<span class="caret"></a> 
        <ul class="dropdown-menu"> 
        <li><a href='block_days.php'>Block Days</a></li> 
        <li><a href='types.php'>Types</a></li> 
        </ul> 
       </li> 
       <li><a href='logout.php'>Logout</a></li> 
      </ul> 
     <li><a href='new_leave.php'>New Leave</a></li> 
     <li><a href='user_search.php'>User Search</a></li> 
     <li><a href='feedback.php'>Feedback</a></li> 
     <li><a href='logout.php'>Logout</a></li> 
     </li> 
     <form class="navbar-form pull-left"> 
      <select name="month" onchange="location = this.options[this.selectedIndex].value;" class="form-control"> 
       <option value="" disabled selected></option> 
       <option value="january.php">January</option> 
       <option value="february.php">February</option> 
       <option value="march.php">March</option> 
       <option value="april.php">April</option> 
       <option value="may.php">May</option> 
       <option value="june.php">June</option> 
       <option value="july.php">July</option> 
       <option value="august.php">August</option> 
       <option value="september.php">September</option> 
       <option value="october.php">October</option> 
       <option value="november.php">November</option> 
       <option value="december.php">Decemeber</option> 
      </select> 
      <select class="form-control" name="year" onchange="this.form.submit()"> 
       <option value="" disabled selected> </option> 
      </select> 
      <noscript><input type="submit" value="Submit"></noscript> 
     </form> 
     </ul> 
    </div> 
</nav> 

私はパディングを追加するだろうが、私は唯一の崩壊メニューのことをどのように行うのですか？

シンプルなハックまたはHTMLコードがありますか？事前

Answer 1

で

ありがとうございますが、メディアクエリを使用することができます。

@media screen and (max-width: 768px) { 
    #elementToMove { 
     padding:200px; 
    } 
} 

ブートストラップは、そのグリッドシステムのためのブレークポイントとしてこれらを使用しています：

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { ... }