ブートストラップのボタンの整列

Question

私の現在のテンプレートでは、私はブートストラップを使用しています。それぞれに配置する必要がある3つのボタンが必要です。最初のものは左に、第2は中間に、第3（最終）は（コンテナ要素内の）右へ（すべての方法へ）です。

私がブートストラップでこれを達成しようとしているとき、私は自分の必要性について何も見つけられません。私は、入力要素の周りに<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? -->

このスニペットがうまく表示されない場合は、これが原因でありますパーセンテージで測位するため、必要に応じてフルページで表示してみてください。

私の質問は、同じ水平線（または行）に配置する場合でも、ドキュメント内のボタンを整列するためにブートストラップを使用することは可能ですか？

ありがとうございます。

Answer 1

非常に単純です。ブートストラップ

• を使用して

  は同じdiv要素またはコンテナ内のすべての3つのボタンを置きます。

• すべての3つのボタンの親divまたはコンテナに「text-center」クラスを追加
• 「プルー」クラスを最初のボタンに追加します。
• 「プル右」クラスを3番目のボタンに追加します。カスタムCSS
  • を使用して

  は、同じ親のdiv内のすべての3つのボタンを置きます。

• あなたはpositionを使用せずにそれを達成することができます.second_btn { display:inline-block; float:none;}

Answer 2

css-番目のボタンを与える.third_btn { display:inline-block; float:right;}

css- 3番目のボタンを与える.first_btn { display:inline-block; float:left;}

css-最初のボタンを与えている親のdiv css-に.parent-div { text-align:center;}

を与えますこの方法：

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