2

Twitter Bootsrap (つまり、12 列のグリッド) を使用してフォームのレイアウトを試しています。

私は 2 列のレイアウト (2/3 - 1/3) を持っているので、それぞれのクラスとして span8 と span4 を持つ 2 つの div があります。

これは問題なく動作しますが、form-horizo​​ntal クラスを使用してフォーム内で同じことを行うと、ラベルの幅が広くなり、テキスト ボックスがガターに押し込まれます。

どうすればこれを修正できますか?

これがjsfiddleのデモです。上の部分は正常に動作し、2 番目のフォームは奇妙なものです。

<div class="container">
<form class="">
    <div>This form is fine!</div>
    <div class="row">
      <div class="span8">Span 8</div>
      <div class="span4">Span 4</div>
    </div>
    <div class="row">
        <div class="span8">
            <div class="control-group">
                <label class="control-label">Name</label>
                <div class="controls">
                    <input type="text" class="span8" />
                </div>
            </div>
        </div>

        <div class="span4">
            <div class="control-group">
                <label class="control-label">Age</label>
                <div class="controls">
                    <input type="text" class="span4" />
                </div>
            </div>
        </div>
    </div>
</form>

<form class="form-horizontal">
    <div>This form is broken!</div>
    <div class="row">
      <div class="span8">Span 8</div>
      <div class="span4">Span 4</div>
    </div>
    <div class="row">
        <div class="span8">
            <div class="control-group">
                <label class="control-label">Name</label>
                <div class="controls">
                    <input type="text" class="span6" />
                </div>
            </div>
        </div>

        <div class="span4">
            <div class="control-group">
                <label class="control-label">Age</label>
                <div class="controls">
                    <input type="text" class="span2" />
                </div>
            </div>
        </div>
    </div>
</form>

</div>

これが私のjsfiddleです

4

1 に答える 1

2

css を見ると、フォーム フィールドの幅が正しく計算されていないようです。ラベルの幅を小さくするか (これは私が行ったことです)、入力フィールドを小さくすることができます。

この css を追加すると、問題が解決するはずです。

.form-horizontal .control-label {
    width: 100px;
}
.form-horizontal .controls{
    margin-left: 120px;
}

/* if you are using responsive bootstrap */
@media (max-width: 480px) {
    .form-horizontal .controls {
        margin-left: 0;
    }
}

http://jsfiddle.net/hajpoj/LutqC/1/

于 2013-01-24T01:56:27.793 に答える