html - 将引导下拉菜单与文本对齐

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

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>