Bootstrap 居中对齐下拉菜单

Question

我的页面中央有一个下拉按钮，但是当我单击下拉菜单时，实际的下拉部分仍在页面的左侧。有什么问题？

HTML

 <div class="row">
    <div class="col-md-12 school-options-dropdown">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School
              <span class="caret"></span></button>
              <ul class="dropdown-menu">
                  <li><a href="#">Add your school</a></li>
                  <li><a href="#">Hello</a></li>
              </ul>
            </div>
    </div>
</div>

CSS

 div.school-options-dropdown {
    text-align: center;
}

.dropdown {
    text-align:center;
}

.dropdown-menu {
    text-align: center;
}

原文由 James Mitchell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要将下拉菜单和切换按钮放在 .btn-group 中。

此外，Bootstrap 提供 .text-center 属性 来对齐内容。这可以用于 .school-options-dropdown ，而不是手动添加 CSS。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-12 school-options-dropdown text-center">
    <div class="dropdown btn-group">

      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School
        <span class="caret"></span>
      </button>

      <ul class="dropdown-menu">
        <li><a href="#">Add your school</a></li>
        <li><a href="#">Hello</a></li>
      </ul>

    </div>
  </div>
</div>

原文由 John Bupit 发布，翻译遵循 CC BY-SA 3.0 许可协议