html - Bootstrap 使用选择组合框折叠导航

Question

我正在使用带有默认断点的固定顶部导航栏。选择元素在未折叠时看起来不错，但在折叠版本中它的位置不正确。

这是我的代码:

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

我会添加填充，但如何只为折叠菜单添加填充？

有没有简单的 hack 或 HTML 代码？

提前致谢

Answer 1

您可以使用媒体查询:

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

Bootstrap 使用这些作为其网格系统的断点:

/* 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) { ... }