對齊Bootstrap中的按鈕

在我當前的模板中，我使用的是Bootstrap，它應該包含三個按鈕，每個按鈕應該分別定位。第一個到左邊，第二個在中間，第三個（最後）到右邊（在一個容器元素中）。對齊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對齊文檔中的按鈕，即使我希望這些按鈕放置在同一水平線（或行）上？

在此先感謝。

來源

2016-03-23 Barrosy

我認爲你需要這個：http://getbootstrap.com/components/#btn-groups – Jer

可能，就像你所做的一樣。不確定現在的問題是什麼？ –

@ C0dekid關於給出的例子，所有的按鈕都粘在一起，我想讓它們水平傳播（例如，flexbox屬性使用一個稱爲空間的值，這對Flex項目非常適用，但我希望這樣做使用提交按鈕，Bootstrap和不使用flexbox，因爲這會使頁面加載速度更慢）。 – Barrosy

很簡單，只需按照下面的步驟。

通過使用自舉

把所有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;}

來源

2016-03-23 09:47:53

啊，這是有道理的。答案比我想象的要容易。 – Barrosy

@Barrosy剛纔回答。我想我遲到了？至少告訴我答案是否正確？我沒有期待任何事情。 '：）' –

可以實現它，而無需使用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>

來源

2016-03-23 09:49:47

對齊Bootstrap中的按鈕

回答

相關問題