我無法使這兩列正確對齊。引導程序:包含下拉列表的左右對齊
關於如何讓第一列左對齊,第二列右對齊並仍然有下拉彈出窗口出現在適當位置的任何建議?
這裏是一個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;'解決它。 –