对齐Bootstrap中的按钮

Question

在我当前的模板中，我使用的是Bootstrap，它应该包含三个按钮，每个按钮分别位于其中。第一个一直到左侧，第二个一直在中间，第三个（最后一个）一直到（一直）到右边（在容器元素内）。

当我尝试通过Bootstrap实现这一目标时，我碰巧找不到与我的需求有关的任何东西。这是因为每次我尝试将<div>标签包装在输入元素周围时，HTML文档都会在单独的行上显示这些标签：

.foo {
  width: 23%;
  /*Should be the width required by the button,
  but I just took a random number that fits
  best. */
  margin: 0 auto;
}
/*This is how it should look like, however
I want to make use of Bootstrap instead of custom positon css if
possible. */

.desired {
  position: absolute;
  left: 10%;
}
.desired div {
  width: 10%;
  text-align: center;
  display: inline-block;
}
.example2 {
  /*Center second element*/
  position: absolute;
  left: 50%;
  margin-left: -5%;
}
.example3 {
  position: absolute;
  right: 0%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />I tried using the following HTML/CSS:
<!--What I tried doing using Bootstrap: -->
<div class="container">
  <input type="submit" class="btn btn-default" value="Foo">
  <input type="submit" class="btn btn-default" value="Test">
  <input type="submit" class="btn btn-default pull-right" value="Bar">
</div>

<br>And got to a result that looks something like this:
<div class="container">
  <input type="submit" class="btn btn-default" value="Foo">
  <div class="foo">
    <input type="submit" class="btn btn-default" value="Test">
  </div>
  <input type="submit" class="btn btn-default pull-right" value="Bar">
</div>

<br>And this:
<div class="container">
  <input type="submit" class="btn btn-default" value="Foo">
  <div class="text-center">
    <input type="submit" class="btn btn-default" value="Test">
  </div>
  <input type="submit" class="btn btn-default pull-right" value="Bar">
</div>

<br>

<!-- What it looks like I want to achieve -->
I want the elements to look similar to:
<div class="container desired">
  <div class="example1">
    <input type="submit" class="btn btn-default" value="Foo">
  </div>
  <div class="example2">
    <input type="submit" class="btn btn-default" value="Test">
  </div>
  <div class="example3">
    <input type="submit" class="btn btn-default" value="Bar">
  </div>
</div>

<!-- Is it possible to align buttons with the use of Bootstrap classes? -->

如果此代码段显示不正确，则是由于位置百分比所致，因此请尝试在整页中查看它。

所以我的问题是：是否可以使用Bootstrap在文档中对齐按钮，即使我希望将它们放置在同一水平线上（或行）？

提前致谢。

Answer 1

非常简单，请按照以下步骤操作。

通过使用引导程序

• 将所有3个按钮放在相同的div或容器中。
• 在父div或所有3个按钮的容器中添加“文本中心”类
• 将“向左拉”类添加到第一个按钮。
• 向第三个按钮添加“向右拉”类。

通过使用自定义CSS

• 将所有3个按钮放在同一父div中。
• 给那个父母的div CSS- .parent-div { text-align:center;}
• 给第一个按钮的CSS- .first_btn { display:inline-block; float:left;}
• 给第三个按钮的CSS- .third_btn { display:inline-block; float:right;}
• 给第二个按钮的CSS- .second_btn { display:inline-block; float:none;}