html - 使用 bootstrap 添加动态居中按钮

Question

我正在使用 Angular Bootstrap 。在我们页面的顶部，我们有一个部分将用于各种控件下拉菜单。我想要 3-4 个带有 ng-if 的下拉菜单，根据给定页面的出现或消失允许下拉菜单的功能。

我希望这些下拉菜单居中。我可以按顺序定义 btn 1、2、3 和 4，但如果只有 btn 3 和 btn 4 处于事件状态，它们应该显示在页面中间，而不是右侧。换句话说，如果下拉菜单由于 ng-if 参数而被禁用，则可见下拉菜单应该居中对齐，就好像另一个下拉菜单不存在一样。每个下拉菜单都应该是标准宽度，因此我相信如果所有下拉菜单都处于事件状态，则所有下拉菜单都将适合一行。

尽管我觉得这应该是非常简单的行为，但我在完成这件事时遇到了麻烦。我试过以分页为中心，但它似乎没有做任何事情。我试过将它们放在按钮组中，但这似乎也不起作用。

有人可以指出适当的 Bootstrap 类来完成这项工作吗？

Answer 1

没问题，以这个 CSS/HTML 为例:

CSS

.form-inline .form-control.w140{
     width:120px; 
 }

HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <form class="form-inline text-center">
        <div class="form-group">
          <select class="form-control w140">
            <option>foo</option>
          </select>
        </div>
        <div class="form-group">
          <select class="form-control w140">
            <option>foo</option>
          </select>
        </div>
        <div class="form-group">
          <select class="form-control w140">
            <option>foo</option>
          </select>
        </div>
        <div class="form-group">
          <select class="form-control w140">
            <option>foo</option>
          </select>
        </div>
      </form>
    </div>
  </div>
</div>

text-center无论有多少<div class="form-group">有。

参见 this fiddle