7

Bootstrap フォーム水平レイアウトを使用してフォームをセットアップし、インライン レイアウトのコントロールを使用しながら、各フィールドの下にヘルプ ブロック テキストを配置したいと考えています。

以下のコードを使用して、目的のレイアウトを実現できました。

<form class="form-horizontal">
            <div class="control-group">
                <span class="control-label">Name</span>
                <div class="controls form-inline">
                    <input type="text" class="input-large" placeholder="First" id="FirstName">
                    <input type="text" class="input-mini" placeholder="M.I." id="FirstName">
                    <input type="text" class="input-large" placeholder="Last" id="LastName">
                </div>
            </div>
        </form>

ただし、以下に示すように、各フィールドに help-block クラスを追加できるようにしたいと考えています。

<input type="text" id="FirstName" class="input-large" >
<p class="help-block">First Name</p>

私が探しているものの例：

サンプル画像

助言がありますか？

4

3 に答える 3

1

ここでフィドル。

CSS (ブートストラップからのいくつかのクラスのオーバーライド)

.help-block{line-height:0px;}
.controls{display:inline-block;vertical-align:top;}

残念ながら、小さな画面では、コントロール div が広範囲の入力をブロックします。

于 2014-05-13T13:52:31.740 に答える