我如何使兩個引導按鈕並排？

好吧，所以我想設置模式並排按鈕。一個是下載鏈接，另一個是鏡像。我嘗試使用顯示器的CSS創建我自己的類：inline-block;但那沒有奏效。我如何讓他們並排？我如何使兩個引導按鈕並排？

繼承人我爲我的模態代碼：

<!-- Texturepack Popup Start --> 

    <div class = "modal fade" id = "texturepack" role = "dialog"> 
     <div class = "modal-dialog"> 
      <div class = "modal-content"> 
       <div class = "modal-header"> 
        <h4>Texture Pack Download</h4> 
       </div> 
       <div class = "modal-body"> 
        <center><h3>Download our Custom Texture Pack!</h3></center> 
        <p class = "tpbutton btn-toolbar"> 
        <a style = "margin: 0 200px; display: inline-block" class = "btn navbar-btn btn-primary pull-center" href = "#" target = "_texturepack">Download</a> 
        <a style = "margin: 0 300px; display: inline-block" class = "btn navbar-btn btn-default pull-center" href = "#" target = "_texturepack">Mirror</a> 
        </p> 
<!-- Carousel Text Start --> 
    <div style = "height:15px"></div> 
    <div style = "border: 2px solid black; width: 500px; margin: 0 auto" id = "textureCarousel" class = "carousel slide"> 

     <ol class = "carousel-indicators" data-ride = "carousel"> 
      <li data-target = "#textureCarousel" data-slide-to = "0" class = "active"></li> 
      <li data-target = "#textureCarousel" data-slide-to = "1"></li> 
      <li data-target = "#textureCarousel" data-slide-to = "2"></li> 
     </ol> 

     <div class = "carousel-inner"> 

      <div class = "item active"> 
       <img src = "img/a.png" alt = "Beach" class = "img-responsive"> 
      </div> 

      <div class = "item"> 
       <img src = "img/b.png" alt = "Beach" class = "img-responsive"> 
      </div> 

      <div class = "item"> 
       <img src = "img/c.png" alt = "Beach" class = "img-responsive"> 
      </div> 

     </div> 

    </div>  

<!-- Carousel End --> 
       </div> 
       <div class = "modal-footer"> 
        <a class = "btn btn-danger" data-dismiss = "modal">Close</a> 
       </div> 
      </div> 
     </div> 
    </div> 

<!-- Texturepack Popup End -->

來源

2014-01-07 MrBumtart

它們在這個版本中是如何顯示的？第一個下面的第二個？ – patrick

試試這把text-align:center外部元素：

<p class = "tpbutton btn-toolbar" style="text-align:center"> 
    <a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">Download</a> 
    <a class = "btn navbar-btn btn-default" href = "#" target = "_texturepack">Mirror</a> 
</p>

Demonstration

編輯：或使用text-center類：

<p class = "tpbutton btn-toolbar text-center"> 
    <a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">Download</a> 
    <a class = "btn navbar-btn btn-default" href = "#" target = "_texturepack">Mirror</a> 
</p>

Demonstration

來源

2014-01-07 01:45:14

它完美的作品。另外，因爲它使用的是一個''''''''''''''''''''''''''，所以如果你想對齊到最左邊和最右邊的話，你可以使用''''''''''''和''''' – loretoparisi

使用按鈕組。

<div class="btn-group"> 
    <a href="#" class="btn btn-primary">Download</a> 
    <a href="#" class="btn btn-default">Mirror</a> 
</div>

來源

2014-01-07 01:45:38 Schmalzy

謝謝我昨天正在尋找這樣的東西 – Chris22

這將改變按鈕的邊界fyi –

爲什麼不bootstrap3使用pull-leftpull-right像

<button class = "btn-primary pull-left">Download</button> 
<button class = "btn-danger pull-right">Mirror</button>

來源

2014-01-07 01:49:14 HTTP

它不會並排排列元素。 –

是的，我也發現了。拉右將按鈕的方式扔到屏幕的右側。它做它說它應該做的事情。傻我 – JustJohn

無論是文本的中心或BTN-組解決方案爲我工作。我結束了把兩個按鈕放在一起，並工作。

<div class="row"> 
    <%= button_to "Delete", "#", :class=>"btn" %> 
    <%= f.button :submit %> 
</div>

來源

2017-01-24 05:57:13 yellowreign

在我的情況下，我掛了20分鐘。
最後

<td class="text-nowrap">

工作。

來源

2017-03-18 17:19:30 theNaive

我如何使兩個引導按鈕並排？

回答

相關問題