Bootstrap=.
リスト項目は本来あるべきように水平ですが、コントロールラベル(Bootstrapクラス)はすべて同じ位置で左に浮いた状態になります。
私のサイトは2列(7列と4列)であるため、フォームはスパン7のdivに含まれています。
以下は私のHTMLです。このページの「Horizontal Forms」 http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms を見ると、ラベルが左揃えになっていることがわかりますが、ラベルの先頭が垂直方向に同じ位置になるように、絶対に左揃えではありません。
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputSaving">What are you saving for?</label>
<div class="controls">
<input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
</div>
</div>
<div class="control-group">
<label class="control-label" for="description">Add a short description</label>
<div class="controls">
<textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="categoryselect">Choose a Category</label>
<div class="controls">
<select class="span4">
<!-- Add some CSS and JS to make a placeholder value-->
<option value="Kittens">Kittens</option>
<option value="Keyboard Cat">Keyboard Cat</option>
<option value="Twitter Bird">Twitter Bird</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="goal">Your Saving Goal</label>
<div class="controls">
<input type="text" class="span4" id="goal">
</div>
</div>
<button class="btn btn-large btn-primary" type="button">Submit</button>
</form>
ちょうど私の2セント。 Bootstrap 3を使用している場合は、text-left
スタイルのcontrol-label
を制御する独自のサイトのスタイルシートに追加のスタイルを追加するだけです。
ラベルにtext-left
を追加する場合、デフォルトでこの.form-horizontal .control-label
をオーバーライドする別のスタイルがあります。追加する場合:
.form-horizontal .control-label.text-left{
text-align: left;
}
次に、組み込みtext-left
スタイルがラベルに正しく適用されます。
問題がフォームラベルの左揃え方法であると言っている場合、これが役立つかどうかを確認してください。
http://jsfiddle.net/panchroma/8gYPQ/
CSSでテキストの左揃え/右揃えを変更してみてください
.form-horizontal .control-label{
/* text-align:right; */
text-align:left;
background-color:#ffa;
}
幸運を!
元のbootstrap= cssクラスを変更する代わりに、デフォルトのスタイルをオーバーライドする新しいcssファイルを作成します。
Bootstrap.cssファイルをインクルードした後、必ず新しいcssファイルをインクルードしてください。
新しいcssファイルで
.form-horizontal .control-label{
text-align:left !important;
}
ラベルにstyle="text-align: left"
を追加するだけです。
「プル左」はあなたが必要なものです、あなたはBootstrap 2を使用しているように見えます、それが利用可能かどうかはわかりません。bootstrap 3もちろん、大幅な手直しでない限り!... for Bootstrap 3ですが、各行にも12列あることを確認する必要があります。そうしないと、問題が発生します。