Question

如何在中心制作引导下拉按钮。

<div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
     keep searching our site listening audio episodes
     <span class="fa fa-play pull-right"></span>
   </button>
    <ul class="dropdown-menu col-md-6" aria-labelledby="dropdownMenu1">
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

提前致谢。

Answer 1

在代码中使用此代码

.dropdown-toggle{position: relative;}
.fa-play{position: absolute;
    margin: 0px auto;
    left: 0;
    right: 0;}

Answer 2

您可以查看以下代码。

我已将style="line-height: 20px;vertical-align:middle;"添加到span

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 keep searching our site listening audio episodes
 <span class="fa fa-play pull-right" style="line-height: 20px;vertical-align:middle;"></span>
   </button>
<ul class="dropdown-menu col-md-6" aria-labelledby="dropdownMenu1">
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
</ul>
</div>

使Bootstrap下拉按钮居中对齐

2 个答案: