在 Bootstrap 中对齐按钮答案

【问题标题】：Align buttons in Bootstrap在 Bootstrap 中对齐按钮
【发布时间】：2016-07-10 12:24:41
【问题描述】：

在我当前的模板中，我使用的是 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? -->

如果这个 sn-p 显示不好，这是由于百分比定位造成的，所以如果需要，请尝试以全页查看。

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

提前致谢。

【问题讨论】：

我认为你需要这个：getbootstrap.com/components/#btn-groups
可能，就像您所做的那样。不确定现在的问题是什么？
@C0dekid 关于给出的示例，所有按钮都相互粘连，我希望它们水平分布（例如，flexbox 属性使用一个名为 space between 的值，这对 flex 很有效项目，但我希望它可以与提交按钮、Bootstrap 一起使用，并且不使用 flexbox，因为这会使你的页面加载速度变慢）。
@PraveenKumar 我想实现我所做的是。但是我不想使用 position 属性，也许这里有人可以告诉我 Bootstrap 中是否已经有解决方案。
@Barrosy 是的，可能。第三个对吗？

标签： html css twitter-bootstrap

【解决方案1】：

非常简单，只需按照以下步骤即可。

使用引导程序

将所有 3 个按钮放在同一个 div 或容器中。
在所有 3 个按钮的父 div 或容器中添加“text-center”类
将“pull-left”类添加到第一个按钮。
为第三个按钮添加“pull-right”类。

使用自定义 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;}

【讨论】：

嗯，有道理。答案比我想象的要容易。
@Barrosy 刚刚回答。我想我迟到了？至少告诉我答案是否正确？我不期待什么。 :)

【解决方案2】：

不用position也可以这样实现：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-default">Button</button>
    </div>
    <div class="col-xs-4 text-center">
      <button class="btn btn-default">Button</button>
    </div>
    <div class="col-xs-4 text-right">
      <button class="btn btn-default">Button</button>
    </div>
  </div>
</div>

【讨论】：