5

フィールドが水平でラベルがフィールドの上にある Bootstrap を使用してフォームを作成しようとしています。私が持っているHTMLは

<form class="form-inline">
    <fieldset class="span6">
        <legend>Personal Details</legend>

        <label>Firstname</label><input class="span12" type="text">
        <label>Surname</label><input class="span12" type="text">

        <label for="PhoneNumber">Phone Number</label><input id="PhoneNumber" class="span6" type="text">
        <label for="MobilePhone">Mobile Phone</label><input id="MobilePhone" class="span6" type="text">

        <label>Email Address</label><input class="span12" type="text">

    </fieldset>
    <fieldset class="span6">
        <legend>Address Details</legend>
    </fieldset>
</form>

これにより、次のようなフォームが生成されます

フォームが良くない

しかし、私が欲しいのは次のように見えるものです

良いフォーム

これにはどの Twitter Bootstrap マジックが必要ですか?

4

1 に答える 1

10

自分の問題を解決できたようです。HTML が次のように変更されました

<form class="form-inline">
    <fieldset class="span6">
        <legend>Personal Details</legend>

        <label>Firstname</label><input class="span12" type="text">

        <label>Surname</label><input class="span12" type="text">

        <div class="controls-row">
            <div class="control-group span6">
                <label for="PhoneNumber">Phone Number</label>
                <input id="PhoneNumber" class="span12" type="text">
            </div>
            <div class="control-group span6">
                <label for="MobilePhone">Mobile Phone</label>
                <input id="MobilePhone" class="span12" type="text">
            </div>                          
        </div>

        <label>Email Address</label><input class="span12" type="text">

    </fieldset>
    <fieldset class="span6">
        <legend>Address Details</legend>
    </fieldset>
</form>
于 2013-05-28T23:55:14.633 に答える