Question

使用bootstrap我试图让这个dropdown菜单显示为页面中间的一个小方框。与this一样。

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

Answer 1

问题可能是下拉菜单的标准风格：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如何使用<select size="1"><option>...</option></select>？

使用bootstrap将下拉菜单对齐到中间

2 个答案: