[英]Dropdown button not working properly in bootstrap. Can some body tell me where i went wrong
我編寫了一個小的示例代碼來測試Bootstrap中的下拉按鈕,但是有些似乎不起作用。 能不能指出我錯了的地方。
<div class = "col-md-8 col-xs-12">
<h1>CuB</h1>
<form class = "col-xs-8 form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Latitude</label>
<label class = "col-xs-8 control-label">xxx.xxxxx</label>
<label class = "control-label col-sm-2">degrees</label>
</div>
<div class = "form-group">
<label class = "col-sm-2 control-label">Display Units</label>
<div class="col-sm-10">
<button class = "btn navbar-btn btn-danger dropdown-toggle pull-right" data-toggle = "dropdown">DropDown<span class = "caret"></span></button>
<ul class = "dropdown-menu">
<li>
<a href="#">Facebook</a>
</li>
<li>
<a href="#">Twitter</a>
</li>
<li>
<a href="#">Google+</a>
</li>
<li>
<a href="#">LinkedIn</a>
</li>
</ul>
</div><!-- /.col-lg-6 -->
</div>
<div class = "form-group pager">
<div class = "col-sm-3 col-xs-12">
<button type = "button" class = "btn btn-success col-xs-12">Use</button>
</div>
</div>
<div class = "col-sm-3 col-xs-12">
<button type = "button" class = "btn btn-warning col-xs-12">Back</button>
</div>
</div>
</form>
</div>
我檢查了您的代碼。 我注意到2個問題。
col-sm-10下拉列表后缺少btn-group div
您必須將pull-right類應用於父級而不是按鈕。
這是一個小提琴演示。
這是HTML的結構。
<div class = "col-md-8 col-xs-12">
<h1>CuB</h1>
<form class = "col-xs-8 form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Latitude</label>
<label class = "col-xs-8 control-label">xxx.xxxxx</label>
<label class = "control-label col-sm-2">degrees</label>
</div>
<div class = "form-group">
<label class = "col-sm-2 control-label">Display Units</label>
<div class="col-sm-10">
<div class="btn-group pull-right">
<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle" type="button">
Dropdown <span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li>
<a href="#">Facebook</a>
</li>
<li>
<a href="#">Twitter</a>
</li>
<li>
<a href="#">Google+</a>
</li>
<li>
<a href="#">LinkedIn</a>
</li>
</ul>
</div>
</div>
</div>
<div class = "form-group pager">
<div class = "col-sm-3 col-xs-12">
<button type = "button" class = "btn btn-success col-xs-12">
Use
</button>
</div>
</div>
<div class = "col-sm-3 col-xs-12">
<button type = "button" class = "btn btn-warning col-xs-12">
Back
</button>
</div>
</form>
</div>
您的問題來自向右拉類,該類在按鈕上應用了float:right。
您可以在菜單上應用此類以解決此問題:
<div class="col-sm-10 dropdown">
<button class = "btn navbar-btn btn-danger dropdown-toggle pull-right" data-toggle = "dropdown">DropDown<span class = "caret"></span></button>
<ul class = "dropdown-menu pull-right">
<li>
<a href="#">Facebook</a>
</li>
<li>
<a href="#">Twitter</a>
</li>
<li>
<a href="#">Google+</a>
</li>
<li>
<a href="#">LinkedIn</a>
</li>
</ul>
</div><!-- /.col-lg-6 -->
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.