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

---

请提供一个可工作的示例。 - Viktor

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

Answer 2

在尝试解决类似问题时，我发现了这个。 感谢Vladimir Rodkin

.dropdown-menu-center {
right: auto;
left: 50%;
-webkit-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);}

https://jsfiddle.net/VovanR/2ao5b22h/

- Filip

---

如果您想在ver4中使用此代码，请尝试以下方法：dropdown-menu-center { right: auto !important; left: 50% !important; top: 100% !important; -webkit-transform: translate(-50%, 0) !important; -o-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; } - Masamoto Miyata

Answer 3

如果您不想更改您的html代码，这段css代码将解决您的问题:

.dropdown {text-align:center;}
.button, .dropdown-menu {margin:10px auto}
.dropdown-menu {width:200px; left:50%; margin-left:-100px;}

在jsfiddle.net上的示例.

- Stanislav Belichenko

---

为避免固定宽度问题，我们可以使用transform:translate：https://jsfiddle.net/w3ujg7fq/ - Dariusz Majchrzak

Answer 4

如果你想将菜单内容居中对齐，那么：

ul.dropdown-menu>li {
    text-align: center;
}

也许可以解决问题。

- sid-m

Answer 5

在 Bootstrap 5 中，你可以使用 JavaScript 在页面加载后覆盖 Popper.js，类似于以下方式：

new bootstrap.Dropdown(document.getElementById('dropdown_button'), {
    popperConfig: function () {
        return {placement: 'bottom'}
    }
});

---

官方文档： https://getbootstrap.com/docs/5.0/components/dropdowns/#using-function-with-popperconfig

以下是可以覆盖的位置： https://popper.js.org/docs/v2/constructors/#options

- dalius_ber

Answer 6

请确保在定义整个 div 类时添加对齐方式。

- Matthew Barker