Bootstrap 中三个大小相等的按钮

Question

我已经开始使用引导程序。我想要一个带有三个按钮的行。按钮应具有相同的高度和宽度。我怎样才能做到这一点？

我想出了以下方法，但这给了我不同的按钮高度。

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

更新：要在每次调整窗口大小时调整按钮大小，您可以执行以下操作：

// 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 引导文档和bootsnipp.com 了解更多信息。

从您的 cmets 中，正如您所说，您正在使用 <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>​