Twitter bootstrap Twitter引导-字段顺序错误

我喜欢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>

记录的重量：
磅
公斤
石
你的体重是多少

---

希望这是足够的信息，为人们帮助我排除故障；如果您需要更多，请告诉我。

Esailija是正确的。按钮是向左浮动的，因此如果您想同时浮动输入框。您可以使用一些简单的CSS来实现这一点：

#weight{float:left}

或

或

---

您可以使用Twitter引导

forminline

类来确保所有控制组元素都以内联方式显示（以正确的顺序）。通过将

表单inine

类添加到

标记中，或通过将表单字段包装在

中来完成此操作
一旦Esailija和Eterps帮助我将注意力集中在正确的轨道上，我就添加了两个CSS类来解决这个问题。详情如下:

.padded-left-form {
    float: left;
    margin-right: 3px;
}

.clear-left-form {
    clear:both;
    float:left;
}

我将.padded left表单附加到文本输入框中，使其浮动到单选按钮的左侧，然后您需要将.clear left表单附加到下面的“帮助块”中，使其垂直移动到右侧位置

最后，它看起来是这样的：

是的，你是对的。谢谢你明智的建议。我现在可以用了。如果有人关心，我将在下面列出我的解决方案详细信息
.padded-left-form {
    float: left;
    margin-right: 3px;
}

.clear-left-form {
    clear:both;
    float:left;
}