2

私はBootstrapが大好きですが、手に負えないように思われる1つの厄介な点は、単純なテキスト入力ボックスで始まるフォームを作成し、右側にいくつかのラジオボタンを配置することです（従来のタイプではありませんが、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

Esailijaは正しいです。ボタンは左に浮いているので、入力ボックスも浮かせたい場合。あなたはいくつかの簡単な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が正しい方向に集中できるようになったら、この問題を解決するために2つの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 に答える