设置水平表单和附加按钮

Question

我有一张表格： http://fiddle.jshell.net/eJ2kS/ 我希望在一行上输入标签和文本，并将按钮添加到文本输入中，但文档对于附加按钮有点模糊： http://twitter.github.com/bootstrap/base-css.html#forms

Answer 1

您必须覆盖以下样式。请注意，这不是使用框架的解决方案。

.control-group, .btn, .control-group label, .controls{ float:left !important; }
.controls{ margin:0 1em !important; }
.control-group{ margin:0 !important; }
label{ margin:5px !important; }

我希望这就是你想要的。它将所有需要的元素浮动到左侧并修正一些边距。就这样。 !important是强制覆盖框架中的旧值。

这是您更新的小提琴：http://fiddle.jshell.net/eJ2kS/5/

Answer 2

你选择这个吗？

如果是，那么代码应该是......

<form id="signup" method="post" action="/signup" class="form-horizontal">
                    <legend>Sign Up</legend>

                    <div class="control-group">
                        <label for="appendedInputButton" class="control-label">User Name</label>
                        <div class="controls">
                          <div class="input-append">
                            <input type="text" size="16" id="appendedInputButton" class="span2"><button type="button" class="btn">Check Availabilty</button>
                          </div>
                        </div>
                     </div>
                </fieldset>
            </form>

我想我已经更新了你的小提琴... RIGHT HERE.