我无法使这两列正确对齐。引导程序:包含下拉列表的左右对齐
关于如何让第一列左对齐,第二列右对齐并仍然有下拉弹出窗口出现在适当位置的任何建议?
这里是一个bootply:http://www.bootply.com/HV42nstWTG
我无法使这两列正确对齐。引导程序:包含下拉列表的左右对齐
关于如何让第一列左对齐,第二列右对齐并仍然有下拉弹出窗口出现在适当位置的任何建议?
这里是一个bootply:http://www.bootply.com/HV42nstWTG
添加一个包装周围的下拉列表。
代码:
<div class="container-fluid">
<div class="row">
<!-- This column should be left-aligned on the screen -->
<div class="col-md-2">
left-aligned content should go here
</div>
<!-- the content in this column should be right-aligned on the screen -->
<div class="col-md-10">
<div class="wrapper pull-right">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Support
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul> <a href="#">text for a link goes here</a>
</div>
</div>
</div>
</div>
</div>
谢谢你!每天学些新东西...! – TimH
它的简单,只需删除 - 右拉,并且增加了MD在第二列偏移。这应该工作。祝你好运!
<div class="container-fluid">
<div class="row">
<!-- This column should be left-aligned on the screen -->
<div class="col-md-2">
left-aligned content should go here
</div>
<!-- the content in this column should be right-aligned on the screen -->
<div class="col-md-4 col-md-offset-6">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Support
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul> <a href="#">text for a link goes here</a>
</div>
</div>
</div>
</div>
您也可以这样做。更改文字链接和下拉菜单的顺序,并在两者上使用pull-right
。
<div class="container-fluid">
<div class="row">
<!-- This column should be left-aligned on the screen -->
<div class="col-md-2">
left-aligned content should go here
</div>
<!-- the content in this column should be right-aligned on the screen -->
<div class="col-md-10">
<a href="#" class="pull-right">text for a link goes here</a>
<div class="dropdown pull-right">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Support
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</div>
</div>
检查的元件'.pull右> .dropdown-menu'我简单地除去'右:0;'解决它。 –