Question

请参阅this fiddle，我有一个按钮和三个输入框，我正在使用Bootstrap。

<div class='container'>
    <div class='row'>
        <form class='span10'>
            <input type='text' placeholder='Label' id='new-row-label' class='span3'>
            <input type='text' placeholder='Orders' id='new-row-orders' class='span2'>
            <input type='text' placeholder='Items' id='new-row-items' class='span2'>
            <div class='btn span2' id='add-row'>Add new item</div>
        </form>
    </div>
</div>

这里有两件事是错的：

按钮略低于输入框。
按钮位于左侧手侧，当我的代码中在输入框后出现。

我怎样才能有三个输入框和一个按钮，所有输入框和一个按钮都在同一高度对齐，右边的按钮？

Answer 1

如果您添加pull-right类btn，就像这样

<div class='btn pull-right span2' id='add-row'>Add new item</div>

它会浮动右侧的按钮like this example，但对我来说似乎并不低。

Answer 2

使用表单类制作内联表单：

<form class="form-inline">
    <div class="row">
        <input type='text' placeholder='Label' id='new-row-label' class='span3'>
        <input type='text' placeholder='Orders' id='new-row-orders' class='span2'>
        <input type='text' placeholder='Items' id='new-row-items' class='span3'>
        <button type="button" class="btn" id='add-row'>Add new item</button>
    </div>
</form>

FORM标签上的class =“span10”也放弃了布局。

http://twitter.github.com/bootstrap/base-css.html#forms

Bootstrap：混合按钮和输入框

2 个答案: