45

初めて Bootstrap を使用していますが、このフォームを水平に左に揃えるのに苦労しています。

リスト項目は本来あるべきように水平ですが、コントロール ラベル (フォーム ラベルの Bootstrap クラス) をすべて同じ位置に配置して左にフロートさせたいと考えています。

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

以下は私のHTMLです。このページ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>
4

7 に答える 7

58

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

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

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

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

于 2015-05-21T10:29:16.023 に答える
38

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

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

.form-horizontal .control-label{
    /* text-align:right; */
    text-align:left;
    background-color:#ffa;
}
于 2013-01-11T03:01:29.210 に答える
4

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

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

新しいcssファイルで

.form-horizontal .control-label{
   text-align:left !important; 
}
于 2014-12-17T20:32:54.280 に答える
1

「プルレフト」が必要です。Bootstrap 2 を使用しているようです。それが利用可能かどうかはわかりません。もちろん、大幅なリワークでない限り、Bootstrap 3 を検討してください。... Bootstrap 3の場合ですが、各行にも12列あることを確認する必要があります。そうしないと、問題が発生します。

于 2015-03-04T15:59:20.947 に答える