html - 通过 Twitter Bootstrap 将按钮附加到输入字段

Question

我目前正在使用 Twitter Bootstrap并且有关于元素大小的问题。我想创建一个带有附加按钮的输入字段。这就是为什么我使用带有“input-append”的 div，它围绕着输入和按钮标签。现在我的问题是:我希望一切都大一点。所以我给了按钮标签属性“btn-large”。不幸的是，输入字段似乎没有类似的属性。如何使输入字段适合附加按钮？

<div class="input-append">
    <input class="span3" id="appendedInputButton" size="16" type="text"><button class="btn btn-large" type="button"><i class="icon-search"></i></button>
</div>

这是我的问题的印象:

问候，克里斯托夫

Answer 1

为您的输入字段定义box-sizing。像这样写:

input, button{
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
}