Question

所以我有一个带有四个按钮的按钮组，第三个有一个下拉菜单，但我似乎无法将它对齐。按钮居中，但下拉菜单左对齐。我尝试了各种各样的CSS，但没有任何效果。也许有人可以提供帮助。：）

HTML：

<div class="btn-group">
  <a href="#" class="btn btn-info btn-large active">Home</a>
  <a href="#" class="btn btn-info btn-large">Link</a>
  <a href="#" class="btn btn-info btn-large dropdown-toggle" data-toggle="dropdown">   <span class="caret"></span></a>
 <ul class="dropdown-menu">
   <li><a href="#">Linkk1</a></li>
   <li><a href="#">Linkk2</a></li>
   <li><a href="#">Linkk3</a></li>
</ul>
 <a href="#" class="btn btn-info btn-large">Link</a>
</div>

以下是我对齐按钮组中心的方法：

.btn-group {
 margin: 0 auto; 
 text-align: center;
 font-size:0 !important;
}
.btn-group a {
 display:inline-block;
}

我尝试过使用相同的方法进行下拉菜单，但没有运气。请帮忙。

Answer 1

尝试将按钮组包装在居中的btn工具栏容器中。

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

.btn-toolbar {
  text-align:center;
}

工作示例：http://jsfiddle.net/r26Zz/

bootstrap下拉元素不对齐中心

1 个答案: