我正在尝试使用中的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>
包裹.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上
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句