web-dev-qa-db-ja.com

これらのBootstrapフォーム項目を左揃えにするにはどうすればよいですか？

Bootstrap=.

リスト項目は本来あるべきように水平ですが、コントロールラベル（Bootstrapクラス）はすべて同じ位置で左に浮いた状態になります。

私のサイトは2列（7列と4列）であるため、フォームはスパン7のdivに含まれています。

以下は私のHTMLです。このページの「Horizo​​ntal 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>
htmlcssformstwitter-bootstrap
41
Tom Maxwell

ちょうど私の2セント。 Bootstrap 3を使用している場合は、text-leftスタイルのcontrol-labelを制御する独自のサイトのスタイルシートに追加のスタイルを追加するだけです。

ラベルにtext-leftを追加する場合、デフォルトでこの.form-horizontal .control-labelをオーバーライドする別のスタイルがあります。追加する場合：

.form-horizontal .control-label.text-left{
    text-align: left;
}

次に、組み込みtext-leftスタイルがラベルに正しく適用されます。

51
Tim B James

問題がフォームラベルの左揃え方法であると言っている場合、これが役立つかどうかを確認してください。
http://jsfiddle.net/panchroma/8gYPQ/

CSSでテキストの左揃え/右揃えを変更してみてください

.form-horizontal .control-label{
    /* text-align:right; */
    text-align:left;
    background-color:#ffa;
}

幸運を！

37
David Taiaroa

元のbootstrap= cssクラスを変更する代わりに、デフォルトのスタイルをオーバーライドする新しいcssファイルを作成します。

Bootstrap.cssファイルをインクルードした後、必ず新しいcssファイルをインクルードしてください。

新しいcssファイルで

.form-horizontal .control-label{
   text-align:left !important; 
}
5
Ruben Benjamin

ラベルにstyle="text-align: left"を追加するだけです。

2
Bruno F Souza

「プル左」はあなたが必要なものです、あなたはBootstrap 2を使用しているように見えます、それが利用可能かどうかはわかりません。bootstrap 3もちろん、大幅な手直しでない限り！... for Bootstrap 3ですが、各行にも12列あることを確認する必要があります。そうしないと、問題が発生します。

1
SupportLocusDev