下拉按钮在引导中不能正常工作.谁能告诉我哪里做错了?
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>
我看了你的代码。我注意到两个问题。
-
col-sm-10下拉列表后缺少btn-groupdiv
-
你必须将右拉类应用于父类而不是按钮。
这是一个小提琴的演示。
JS Fiddle Demo
这是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>
你的问题来自于pull-right类,它在按钮上应用了一个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>
演示
相关文章:
- 有人能告诉我如何在cent-os中打开扩展名为.dat的FIle吗
- 按钮不'我不工作;我又回到了起始页
- 谷歌关闭注释赢得'Don’不要告诉我;I’我错了
- JavaScript:有人能告诉我我的代码出了什么问题吗?
- 我需要将这两个函数从javascript更改为JQuery,任何人都可以告诉我如何转换
- 有人可以告诉我如何调试这个 html 表单/javascript 组合
- 有人能告诉我如何使用getCurrentPosition的watchposition()函数吗
- href 在导航栏中不起作用.有人可以告诉我如何让它工作
- 有人能告诉我为什么我的Scrollspy不工作吗
- Javascript初学者-谁能告诉我为什么我的按钮不工作?
- 有人能告诉我这个代码是怎么工作的吗?
- 有人能告诉我这在ff和ie中是如何工作的吗?
- 当我在函数中包装动画效果时,它停止工作.有人能告诉我为什么吗?
- 下拉按钮在引导中不能正常工作.谁能告诉我哪里做错了?
- 请告诉我如何让zclip工作
- Javascript代码不工作?告诉我为什么
- 你能告诉我为什么这不是吗;t工作
- WordPress中的自定义菜单无法正常工作,任何人都可以告诉我原因
- 有人能告诉我为什么这个循环不能正常工作吗?
- Ladda UI为Bootstrap 3不工作?请看到我的代码,并告诉我修复