4

Boostrap を使用して、水平行入力 (「コントロール行」) を持つフォームをレイアウトしようとしていますが、フォーム入力の上にラベルが配置されています。例として、以下のレイアウトを参照してください。

これはBoostrapで可能ですか？100 万行 / スパン # の div に頼るのを避けようとしていますが、多くのカスタム CSS なしでこれを実装する別の方法を見つけることができません。私の現在の計画は、テーブルを使用してテストすることです:/ その運命から私を救ってください!

ラベル1 ラベル2
| | 入力 | | | 入力 |

ラベル 3
| | 長い入力 |

ラベル 4 ラベル 5
| | 入力 | | | 入力 |
4

1 に答える 1

5

コントロール行クラスとコントロールグループクラスの組み合わせを使用して、テーブルを使用せずにこれを実現することができました。

<div class="container">
<form>
    <div class="controls-row">
        <div class="control-group">
            <label for="first-name" class="control-label">First Name:</label>
            <div class="controls">
                <input type="text" id="first-name" name="FirstName" />
            </div>                
        </div>
        <div class="control-group">
            <label for="middle-initial" class="control-label">M.I.:</label>
            <div class="controls">
                <input type="text" id="middle-initial" name="MiddleInitial" class="input-mini" />
            </div>                
        </div>
        <div class="control-group">
            <label for="last-name" class="control-label">Last Name:</label>
            <div class="controls">
                <input type="text" id="last-name" name="LastName" />
            </div>                
        </div>
    </div>
    <div class="control-row">
         <div class="control-group">
            <label for="ssn" class="control-label">Social Security Number:</label>
            <div class="controls">
                <input type="text" id="ssn" name="SocialSecurityNumber" />
            </div>                
        </div>
        <div class="control-group">
            <label for="dob" class="control-label">Date of Birth:</label>
            <div class="controls input-append">
                <input type="text" id="dob" name="DateOfBirth" />
                <a href="#" class="btn btn-small"><i class="icon-calendar"></i></a>
            </div>
        </div>           
    </div>
</form>

</ p>

ただし、正しく機能させるには（control-group divがdisplay: block;であるため、そのクラスをオーバーライドしvertical-align: top;て、次のように追加する必要がありました）。

.control-group {
    display: inline-block;
    vertical-align: top;
}

結果は次のとおりです。http：//jsfiddle.net/bhGyz/

于 2012-10-12T13:21:27.593 に答える