Question

我正在尝试使用navbar中的引导来实现下拉菜单。我遇到this example，显然效果很好。但是我想将第一个下拉列表（从左侧）更改为dropdown button。但是，如果我尝试将其更改为按钮，则样式会变得混乱（请参见下图）。

相关代码：

<body>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo goes here</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
        <div class="btn-group">
            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Hollywood Account</a></li>
            <li><a href="#">Another Account</a></li>
            <li><a href="#">Yet another Account</a></li>
          </ul>
        </div>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</body>

Answer 1

将.btn包装在一个被归类为navbar-form的包装中，以根据给定的示例启用填充，如下所示：

<ul class="nav navbar-nav">
    <li class="dropdown">
        <!-- doesn't need to be a form element -->
        <form class="navbar-form">
            <div class="btn-group">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Hollywood Account</a></li>
                    <li><a href="#">Another Account</a></li>
                    <li><a href="#">Yet another Account</a></li>
                </ul>
            </div>
        </form>
        <!-- example using div and anchor instead of form and button -->
        <div class="navbar-form">
            <div class="btn-group">
                <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Hollywood Account</a></li>
                    <li><a href="#">Another Account</a></li>
                    <li><a href="#">Yet another Account</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

此处位于CodePen

Answer 2

没有理由让btn包裹在没有意义的形式中。在bootstrap 3中，您只需要将类.navbar-btn添加到按钮，使其在导航栏中垂直对齐。此外，如果您只有一个按钮，则没有理由使用按钮组。如果您要有多个按钮，请使用按钮组。但是在表单中包含它的检查答案只是愚蠢加上你无缘无故地添加另一个dom元素。请尝试以下方法：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo goes here</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
            <button class="btn btn-default navbar-btn dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Hollywood Account</a></li>
            <li><a href="#">Another Account</a></li>
            <li><a href="#">Yet another Account</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Answer 3

Drinkin People is correct

Simply changing this:

<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>

To this:

<a class="navbar-btn btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>

It will center your button vertically in the navbar

Answer 4

只需将<a>标记更改为<button>标记即可。

 <ul class="nav navbar-nav">
    <li class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Hollywood Account</a></li>
          <li><a href="#">Another Account</a></li>
          <li><a href="#">Yet another Account</a></li>
        </ul>
    </li>
</ul>

编辑：在我自己的某个网站上查看。请尝试删除<div class="btn-group">。

Bootstrap导航栏下拉按钮

4 个答案: