Bootstraper中的三個相同大小的按鈕

Question

我已經開始使用bootstraper。我想要一排三個按鈕。按鈕應該有相同的高度和寬度。我怎樣才能做到這一點？

我想出了以下內容，但是這給了我不同的按鈕高度。

<div class="row-fluid"> 
    <div class="span2 offset1"> 
     <a href="#" class="btn btn-info btn-block"> 
      <div class="buttonbody"> 
       <img src=".." /> 
       <p>Button1<br />Second row<p> 
      </div> 
     </a> 
    </div> 
    <div class="span2 offset1"> 
     <a href="#" class="btn btn-info btn-block"> 
      <div class="buttonbody"> 
       <img src=".." /> 
       <p>Button2<p> 
      </div> 
     </a> 
    </div> 
    <div class="span2 offset1"> 
     <a href="#" class="btn btn-info btn-block"> 
      <div class="buttonbody"> 
       <img src=".." /> 
       <p>Button3<p> 
      </div> 
     </a> 
    </div> 
</div> 

Answer 1

要獲得相同的高度，你將不得不使用jQuery來計算最大然後應用它到所有應該具有相同高度的元素：

var selector = ".row-fluid .buttonbody"; 
var maxHeight = 0; 
$(selector).each(function() { 
    var selfHeight = $(this).height(); 
    if (selfHeight > maxHeight) { 
     maxHeight = selfHeight; 
    } 
}); 
// set the same height on all elements 
$(selector).height(maxHeight); 

UPDATE：要調整按鈕的每個窗口大小時，你可以做到以下幾點：

// declare a function to be called 
// each time buttons need to be resized 
var resizeButtons = function() { 
    var selector = ".row-fluid .buttonbody"; 
    var maxHeight = 0; 
    $(selector).each(function() { 
     var selfHeight = $(this).height(); 
     if (selfHeight > maxHeight) { 
      maxHeight = selfHeight; 
     } 
    }); 
    // set the same height on all elements 
    $(selector).height(maxHeight); 
} 

$(function() { 
    // attach function to the resize event 
    $(window).resize(resizeButtons); 

    // call function the first time window is loaded; 
    resizeButtons(); 
}); 

希望有幫助。

Answer 2

答案很簡單：http://jsfiddle.net/D2RLR/2942/

龍答：

下面的代碼你想要做什麼。

<div class="container"> 
    <a href="#" class="btn"><strong>Button 1</strong></a> 
    <a href="#" class="btn"><strong>Button 2</strong></a> 
    <a href="#" class="btn"><strong>Button 3</strong></a> 
</div>​ 

這裏是tutorial相同。

我建議你閱讀twitter bootstrap文檔和bootsnipp.com以獲取更多信息。

從你的意見，你說你正在使用<br/>您可以使用以下方法：fiddle，

<div class="container"> 
<a href="#" class="btn"><strong>Button 1<br/>Second row</strong></a> 
<a href="#" class="btn"><strong>Button 2<br/>&nbsp;</strong></a> 
<a href="#" class="btn"><strong>Button 3<br/>&nbsp;</strong></a> 
</diV>​