css - Bootstrap导航栏下拉按钮

我正在尝试使用navbar中的bootstrap实现下拉菜单。我遇到了this example,它显然可以正常工作。但是我想将第一个下拉菜单(从左侧)更改为dropdown button。但是,如果我尝试将其更改为按钮,则样式会变得一团糟(请参见下图)。

navbar styling

相关代码:

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

最佳答案

按照给定的示例,将.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