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> 中