Bootstrap导航栏下拉按钮

Question

Bootstrap导航栏下拉按钮

我试图在一个使用bootstrap实现一个下拉菜单navbar.我遇到了这个例子,它显然很完美.但是我想将第一个下拉列表(从左侧)更改为下拉按钮.但是,如果我尝试将其更改为按钮,则样式会变得混乱(请参见下图).

相关代码:

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ale*_*man 8

包裹.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>

Run Code Online (Sandbox Code Playgroud)

这是在CodePen上

归档时间：	9 年，10 月前
查看次数：	6857 次
最近记录：	9 年，10 月前