Question

我是Bootstrap的新手，我正在了解它。我正在尝试将一个下拉菜单放在页面的中央，我设法将链接切换为切换菜单，但此菜单显示不合适。

这就是我的尝试：

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4 text-center">
      <div class="dropdown">
        <a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
          </li>
        </ul>
      </div>
    <!-- /div.dropdown -->
    </div>
    <!-- /div.col-md-4 .col-md-offset-4 -->
  </div>
  <!-- /div.row -->
</div>
<!-- /div.container -->

显然链接是中心的，因为我使用.text-center作为包含所有内容的div，我尝试使用类center-block，但它没有帮助。任何提示？

Answer 1

下拉列表是一个块元素，将其与text-align：center对齐将不适用于块元素。尝试在dropdown div上添加display：inline-block。查看jsfiddle ex。 http://jsfiddle.net/kuyabiye/KLH8S/

<style>
    .dropdown-center {
       text-align: center;

    }

    .dropdown-center .dropdown {
        display: inline-block;
    }
</style>


<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4 dropdown-center">
      <div class="dropdown">
        <a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
          </li>
        </ul>
      </div>
    <!-- /div.dropdown -->
    </div>
    <!-- /div.col-md-4 .col-md-offset-4 -->
  </div>
  <!-- /div.row -->
</div>
<!-- /div.container -->

如何使用Bootstrap集中div的内容

1 个答案: