2

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

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

4

2 回答 2

5

埃赛利亚是正确的。按钮是向左浮动的，所以如果你想浮动输入框也是如此。你可以用一些简单的 CSS 来做到这一点：

#weight{float:left}

或者

.input-small{float:left}

或者

您可以使用 Twitter Bootstrapform-inline类来确保所有控件组元素都内联显示（以正确的顺序）。通过将form-inine类添加到您的<form>标签或将表单字段包装在<div class="form-inline"> ... </div>

于 2012-05-06T15:43:40.963 回答
0

一旦 Esailija 和 Eterps 帮助我专注于正确的轨道，我就添加了两个 CSS 类来解决这个问题。它们如下：

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

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

我将 .padded-left-form 附加到文本输入框以将其浮动到单选按钮的左侧，然后您需要将 .clear-left-form 附加到以下“帮助块”以将其垂直带到正确的位置.

最后是它的样子：

用 CSS 更新

于 2012-05-07T15:19:57.187 回答