Twitter Boostrap - 水平对齐标签到下拉列表

Question

我想在下拉菜单旁边有下拉列表的标签.

在下面找到我当前示例的样子:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
  <li role="presentation">Order: </li>
  <li role="presentation" class="dropdown">
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ticker<span class="caret"></span></a>
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
      <li>
        <a href="#">Action</a>
      </li>
      <li>
        <a href="#">Another action</a>
      </li>
      <li>
        <a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li>
        <a href="#">Separated link</a>
      </li>
    </ul>
  </li>
</ul>

有关如何正确对齐标签的任何建议吗？

Thx提前!

Answer 1

我不确定我是否理解正确,但为了对齐我会使用flexbox.

.nav-pills {
  display: flex;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-pills" role="tablist">
  <li role="presentation">Order: </li>
  <li role="presentation" class="dropdown">
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Ticker
                                <span class="caret"></span>
                            </a>
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
      <li>
        <a href="#">Action</a>
      </li>
      <li>
        <a href="#">Another action</a>
      </li>
      <li>
        <a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li>
        <a href="#">Separated link</a>
      </li>
    </ul>
  </li>