twitter-bootstrap - Twitter Bootstrap - 字段顺序错误

Question

我喜欢 Bootstrap，但我似乎无法解决的一个烦恼是，当构建一个以简单文本输入框开头的表单时，我在右侧放置了一些单选按钮(不是传统类型，而是Bootstrap 称为“按钮组”)。可悲的是，输入框郑重拒绝向左移动，总是跳到堆栈的右侧。为什么哦为什么？任何帮助表示赞赏。

这是一张表格的图片:

下面是导致这场变异灾难的代码:

<div class="control-group">
    <label class="control-label" for="appendedInput">Weight recorded:</label>
    <div class="controls">
        <div class="input">
            <input class="input-small" id="weight" size="16" type="text" placeholder="weight" ready-for-history></input>
            <span class="btn-group" data-toggle="buttons-radio">
                <button class="btn active">lbs</button>
                <button class="btn">kg</button>
                <button class="btn">stone</button>
            </span>
        </div>
        <p class="help-block">What weight were you?</p>
    </div>
</div>

希望这些信息足以让人们帮助我解决问题；如果您需要更多，请告诉我。

Answer 1

Esailija 是正确的。按钮是向左浮动的，所以如果你想让输入框也 float 。您可以使用一些简单的 CSS 来做到这一点:

#weight{float:left}

或

.input-small{float:left}

或

您可以使用 Twitter Bootstrap form-inline类以确保所有控制组元素都以内联方式显示(以正确的顺序)。通过添加 form-inine 来做到这一点给你上课 <form>标记，或将您的表单字段包装在 <div class="form-inline"> ... </div> 中