1

フォームの各行に 3 つのコントロールが必要です。ただし、すべての行のコントロールの幅は異なります (正確には少ない)。常に列を使用する必要がありますか? それはcssの通常の動作ですか？CSS が迷路のように感じることがある

これが私がこれまでに持っているものです：

ブートプライ

<form action="" method="post" role="form" class="form-inline">
    <div class="container">
        <div class="row">
            <div class="form-group">
                <label for="id_firstname">First Name</label>
                <input type="text" name="firstname" class="form-control" id="id_firstname">
            </div>
            <div class="form-group">
                <label for="id_middlename">Middle Name</label>
                <input type="text" name="middlename" class="form-control" id="id_middlename">
            </div>
            <div class="form-group">
                <label for="id_lastname">Last Name</label>
                <input type="text" name="lastname" class="form-control" id="id_lastname">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="form-group">
                <label for="id_address">Address</label>
                <input type="text" name="address" class="form-control" id="id_address">
            </div>
            <div class="form-group">
                <label for="id_postalcode">Postal Code</label>
                <input type="text" name="postalcode" class="form-control" id="id_postalcode">
            </div>
            <div class="form-group">
                <label for="id_city">City</label>
                <input type="text" name="city" class="form-control" id="id_city">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="form-group">
                <label for="id_telephone">PHone</label>
                <input type="text" name="phone" class="form-control" id="id_telephone">
            </div>
            <div class="form-group">
                <label for="id_mobile">Mobile</label>
                <input type="text" name="mobile" class="form-control" id="id_mobile">
            </div>
            <div class="form-group">
                <label for="id_email">E-mail</label>
                <input type="text" name="email" class="form-control" id="id_email">
            </div>
        </div>
    </div>
</form>

申し訳ありませんが、リンクだけが必要だと思っていました。また、すべての .form-group を .col-md-4 でラップしましたが、それでも入力の幅は互いに異なります

4

1 に答える 1

6

インライン フォームのブートストラップ ドキュメントから

カスタム幅が必要: Bootstrap では、入力、選択、およびテキストエリアはデフォルトで 100% 幅です。インライン フォームを使用するには、内部で使用されるフォーム コントロールに幅を設定する必要があります。

すべての入力を同じサイズにする場合は、次の css を適用するだけです

.form-group {
    width: 300px;
}
.form-group input {
    width: 300px;
}

CSSで起動

またはcol-md-4、次のように各グループにクラスを追加して、各フォーム グループの幅を修正します。

<div class="form-group col-md-4">
    <label for="id_telephone">Phone</label>
    <input type="text" name="phone" class="form-control" id="id_telephone">
</div>

クラスで起動する

于 2013-11-07T14:32:33.243 に答える