Выравнивание начальной загрузки выпадающий с текстом

Question

Я создал выпадающий список Bootstrap, используя этот код:

<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>