Question

<div class="dropup center-block">
            <button class="btn btn-info dropdown-toggle center-block" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Me<span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li class="dropdown-header">Dropup stuff</li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>

将center-block添加到div和按钮，但无法将dropup菜单置于中心位置。

在此page的“下拉位置”中可以找到类似的内容。按钮向左对齐，但菜单是正确的。我可以正确对齐菜单，但不能居中。

请帮忙！

Answer 1

一个小技巧添加了一些css规则text-center与dropdown类和dropdown-menu-center到列表中。

来源：https://stackoverflow.com/a/28078054/6142097

＆＃13;

.dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(-50%, 0) !important;
}

＆＃13;

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<div class="container">
  <h2>Dropdowns</h2>
  <div class="dropdown text-center">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-center">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

尝试添加左边距

 <div class="dropup center-block" style="margin-left: 49%;">

Answer 3

解决方案是使用'dropdown-menu-center“类而不是'center-block'。

Answer 4

这是你的解决方案 https://jsfiddle.net/7urwr62j/

 <div class="text-center">
  <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
</div>
<style>
.dropdown{
  display: inline-block;
}
</style>

中心位置下拉按钮和下拉菜单？

4 个答案: