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>

如何正确地将标签与下拉列表对齐？

提前谢谢！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需在自定义css文件中添加以下css

即可

.nav-pills>li:not(.dropdown) {
    padding: 10px 12px;
}

.nav-pills>li:not(.dropdown) {
  padding: 10px 12px;
}

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

Answer 3

你可以简单地添加这样的填充：

/* Optional theme */

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

ul.nav > li:first-child {
 padding:10px 5px;
}

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

Answer 4

使用Flex导航药片

session

JS FIDDLE：https://jsfiddle.net/pradeep0594/qfwngj5x/1/供您参考

Answer 5

我更喜欢Gerard的display: flex解决方案，但为了防止有人更喜欢维护原始显示属性，以下是仅使用line-height垂直居中.nav-pills的示例}。

＆＃13;

<style>
    .nav-pills > li {
        line-height: 40px;
    }
    .nav.nav-pills > li > a {
        /* removes top & bottom padding */
        padding: 0 15px;
    }
</style>

<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>

＆＃13;

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

5 个答案: