如何在 Bootstrap 导航栏中显示水平子菜单？答案

【问题标题】：How to Show horizontal submenu in Bootrap Navigation bar?如何在 Bootstrap 导航栏中显示水平子菜单？
【发布时间】：2017-08-02 10:42:52
【问题描述】：

我想将我的引导垂直下拉菜单显示为水平视图。这意味着 dropdwon 列表项应显示在同一行中。

目前下拉菜单项显示在垂直视图的下拉列表中。但是当用户单击按钮时，我需要相同的水平视图。

电流输出： enter image description here

预期输出： enter image description here

这是我的代码

<nav class="navbar navbar-default  navbar-inverse" role="navigation">
                          <div class="navbar-header">

                              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                  <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                              </button> <a class="navbar-brand" href="#">Brand</a>
                          </div>

                          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                              <ul class="nav navbar-nav">
                                  <li class="active">
                                      <a href="#">Link</a>
                                  </li>
                                  <li>
                                      <a href="#">Link</a>
                                  </li>
                                  <li class="dropdown">
                                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                                      <ul class="dropdown-menu">
                                          <li>
                                              <a href="#">Action</a>
                                          </li>
                                          <li>
                                              <a href="#">Another action</a>
                                          </li>
                                          <li>
                                              <a href="#">Something else here</a>
                                          </li>
                                          <li class="divider">
                                          </li>
                                          <li>
                                              <a href="#">Separated link</a>
                                          </li>
                                          <li class="divider">
                                          </li>
                                          <li>
                                              <a href="#">One more separated link</a>
                                          </li>
                                      </ul>
                                  </li>
                              </ul>
                              <form class="navbar-form navbar-left" role="search">
                                  <div class="form-group">
                                      <input class="form-control" type="text">
                                  </div>
                                  <button type="submit" class="btn btn-default">
                                      Submit
                                  </button>
                              </form>
                              <ul class="nav navbar-nav navbar-right">

                                  <li class="dropdown">
                                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                                      <ul class="dropdown-menu">
                                          <li>
                                              <a href="#">Action</a>
                                          </li>
                                          <li>
                                              <a href="#">Another action</a>
                                          </li>
                                          <li>
                                              <a href="#">Something else here</a>
                                          </li>
                                          <li class="divider">
                                          </li>
                                          <li>
                                              <a href="#">Separated link</a>
                                          </li>
                                      </ul>
                                  </li>
                              </ul>
                          </div>

                      </nav>

【问题讨论】：

最简单的方法是不要在您的 .dropdown-menu 中使用
，而是使用我们的。

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><span><a href="#">Page 1</a></span>| <span><a href="#">Page 2</a></span>| <span><a href="#">Page 3</a></span></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <div class="container"> <h3>Navbar With Dropdown</h3> <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p> </div> </body> </html>

var pos = parseInt($('.linedUp').closest('.dropdown').position().left); calcWidth = function(){ setTimeout(function(){ var width = 0; var maxWidth = $(document).width() - pos; $('.linedUp li').each(function(){ width += parseInt($(this).outerWidth()) + 2; if( maxWidth < width){ width -= parseInt($(this).outerWidth()); } }); $('.linedUp').css({ width: width }); }, 0); }