web-dev-qa-db-ja.com

インラインフォーム内で入力グループを使用する

input-groupをform-inlineに追加すると、input-groupは、他のコントロールとインラインではなく、「新しい行」のフォームの下に表示されます。

これは、input-groupラッパークラスのdisplayがtableに設定されているのに対し、正常に機能する他の入力のdisplayがinline-block。もちろん、input-groupにinline-blockを表示することはできません。これは、その子add-onスパンにdisplay: table-cellがあるため、親のプロパティを正しく調整する必要があるためです。

だから私の質問は：インラインフォーム内でinput-groupを使用することは可能ですか？sing Bootstrapクラス排他的に？そうでない場合、最善の回避策は何でしょうかカスタムクラスの使用を許可する。

デモ が私のポイントを示しています。コードは次のとおりです。

<form action="" class="form-inline">
    <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
    <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>

    <div class="checkbox">
        <label>
            <input type="checkbox" /> and Checkboxes
        </label>
    </div>
    <select class="form-control" style="width: 150px;">
        <option>and Selects</option>
    </select>

    <button type="submit" class="btn btn-default">and Buttons</button>
    <div class="input-group" style="width: 220px;">
        <span class="input-group-addon">BUT</span>
        <input type="text" class="form-control" placeholder="not with input-groups" />
    </div>
</form>
htmlcsstwitter-bootstraptwitter-bootstrap-3
25
edsioufi

これは確かにバグであり、解決されました（詳細については githubの問題 を確認してください）。

これから、インラインフォームのBootStrap=で子フォームコントロールをラップする必要があります.form-group。

だから私のコードは次のようになります：

<form action="" class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
    </div>

    ...
    <div class="form-group">
        <div class="input-group" style="width: 220px;">
            <span class="input-group-addon">BUT</span>
            <input type="text" class="form-control" placeholder="not with input-groups" />
        </div>
    </div>
</form>
42
edsioufi

必要なインラインレイアウトを取得するには、フォームを列に分割する必要があるかもしれません。例（私はあなたが望んでいることを考えています）はBootstrap site here にあります。

入れてみて

<div class="col-lg-1"></div>

私の言いたいことを確認するためにコントロールの周りに。もちろん、12列で作業する必要があるため、それに応じて調整する必要があります。

1
Damon