ラベルと入力をBootstrap 3で垂直に並べるにはどうすればいいですか?ラベルと入力の両方を同じ行に配置したいです。
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
</div>
問題は、<label>
が<h2>
タグ内にあり、ヘッダータグにmargin
がデフォルトのスタイルシートで設定されていることです。
bootstrap 3ドキュメント 水平形式の場合.form-horizontal
クラスは、フォームのラベルと入力を垂直方向に揃えます。これらのフォームの構造は次のとおりです。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-lg-2 control-label">Label1</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="input1" placeholder="Input1">
</div>
</div>
<div class="form-group">
<label for="input2" class="col-lg-2 control-label">Label2</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="input2" placeholder="Input2">
</div>
</div>
</form>
したがって、フォームは次のようになります。
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select id="class_type" class="form-control input-lg" autocomplete="off">
<option>Economy</option>
<option>Premium Economy</option>
<option>Club World</option>
<option>First Class</option>
</select>
</div>
</div>
</form>
あなたは今までにあなたの答えを見つけたと確信していますが、まだ答えを探している人のために:
input-lgを使用すると、form-group-lgクラスに加えてform-group-lgを使用しない限り、マージンは一致しません。その例はドキュメントにあります:
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
これらのソリューションはどれも私にとってはうまくいきませんでした。しかし、 ブートストラップの例 に従って、各フォーム行に<div class="form-row align-items-center">
を使用することで、垂直方向の中央揃えを取得できました。