对齐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或所有3个按钮的容器中添加“text-center”类
• 将“左拉”类添加到第一个按钮。
• 将“拉右”类添加到第三个按钮。

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

Answer 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>