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

简答：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>

Answer 2

要获得相同的高度，你必须使用jQuery来计算max，然后将它应用于所有应该具有相同高度的元素：

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

希望有所帮助。

Bootstrap中有三个相同大小的按钮

2 个答案: