對齊文本

Question

引導下拉我使用此代碼創建一個自舉下拉：

<div class="dropdown" style="margin-bottom: 20px;">Ordered by 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="primary">Random</span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Random</a></li> 
     <li><a href="#">Earliest</a></li> 
     <li><a href="#">Latest</a></li> 
    </ul> 
    post. 
</div> 

但你可以看到，下拉未與鏈接對齊：

如何我可以讓它對齊，如果可能的話，還可以在頂部指向鏈接顯示白色三角形？

JSFiddle example

Answer 1

這是你在找什麼？

http://jsfiddle.net/t75g5/

<span>Ordered by<span> 
    <div class="dropdown mydropdown" style="margin-bottom: 20px;"> 
    <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"><span class="primary">Random <b class="caret"></b></span> 

</a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
    <li><a href="#">Random</a> 

    </li> 
    <li><a href="#">Earliest</a> 

    </li> 
    <li><a href="#">Latest</a> 

    </li> 
</ul>post.</div>