使用引导程序将下拉菜单与中间对齐

debugcn 发表于 Dev

杰尔曼（Jermain）189

使用引导程序，我试图使此下拉菜单显示为页面中间的一个小框。像这样。

这是HTML代码：

<div class="dropdown">
  <button 
  class="btn btn-default dropdown-toggle" 
  type="button" 
  id="dropdownMenu1" 
  data-toggle="dropdown" 
  aria-expanded="true">
    List
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
    <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a></li>
    <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a></li>
    <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a></li>
  </ul> 
</div>

亚历山德罗

也许问题在于下拉菜单的标准样式：

.center {
  text-align: center;
}

.dropdown-menu{
  width: 200px;
  text-align:center !important;
  float: none !important;
  margin: 0 auto !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid center">
  <div class="col-md-5">

    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        List
        <span class="caret"></span>
      </button>

      <ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
        <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a>
        </li>
        <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a>
        </li>
        <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a>
        </li>
      </ul>
    </div>
    <div>
    </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。