对齐文本

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>