将引导下拉列表与文本对齐

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>