1

请看这个小提琴，我有一个按钮和三个输入框，我正在使用 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>​

这里有两件事是错误的：

  1. 按钮略低于输入框。
  2. 该按钮位于左侧，在我的代码中，它出现在输入框之后。

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

4

2 回答 2

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

于 2012-09-24T19:24:03.793 回答
2

如果你像这样添加pull-right类btn

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

它会像这个例子一样将按钮浮动在右侧，但对我来说似乎并不低。

于 2012-09-24T19:14:55.333 回答