0

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

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

<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>
4

2 回答 2

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>​

这是相同的教程。

我建议您通过 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>​
于 2012-10-26T07:14:26.897 回答
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();
});

希望有帮助。

于 2012-10-29T12:03:30.140 回答