將多個列的引導按鈕組和文本對齊

我有一個看似簡單的問題，我可以用一個小小的CSS修復，但我想知道是否有人知道在Bootstrap中放置文本的列中的正確方式，然後一個帶有按鈕的列，並使它們垂直對齊。將多個列的引導按鈕組和文本對齊

下面的代碼：

<div class="row"> 
<div class="col-xs-8">Looking for something specifc? Have you tried looking through the <a href="#">Topic Index</a>?</div> 
<div class="col-xs-4"> 
    <div class="dropdown dropup pull-right"> 
    View articles by 
    <button class="btn btn-default dropdown-toggle" type="button" id="dd-TopicIndex" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
     Category 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 
    </div> 
</div>

這裏就是它產生： Misaligned columns

你看到的問題是，在右邊的文本對齊按鈕，但文字在左邊不是。

感謝您的幫助。 d

來源

2015-07-19 davebowker

事實上BTN類添加一些填充：

btn { 
    display: inline-block; 
    padding: 6px 12px; 
    ... 
}

文本屬於同一div所以不知它繼承了這個空白。所以如果你想讓左邊的文本對齊，你可能需要添加一個填充頂部，這當然不是最好的解決方案。

來源

2015-07-20 04:24:43 VDarricau

這是一個使用CSS的簡單解決方案，但是因爲我們都同意不是最好的。我希望BootStrap可能已經考慮到了這種情況，並且有一個本地/內置的方式來實現這一點。 – davebowker

你可以嘗試做一個[form-inline]（http://getbootstrap.com/css/#forms-inline），這樣它就會對齊。 – VDarricau

不幸的是，當它像這樣分成多個列時不起作用。 :( – davebowker

將多個列的引導按鈕組和文本對齊

回答

相關問題