3

私は Bootstrap を初めて使用し、これまでのところ気に入っていますが、グリッドに関する簡単な質問がいくつかあります - どこにも答えが見つからないようです...

<div class="container">
    <div class="row" style="background-color: #ccc;"> <!-- 1. How do I get this background colour to exclude the left 20px gutter? -->

        <div class="span5">
            Left Col

            <div class="row">
                <div class="span5">
                    <input class="span5" type="text"/> <!-- 2. How do I stop this input from shifting right 20px in IE7? -->
                </div>
            </div>

        </div>

        <div class="span7">
            Right Col

            <div class="input-prepend">
                <!-- This lines up correctly, even in IE7 - my star hack will break this -->
                <span class="add-on">+</span><input type="text" placeholder="Add..." class="span6">
            </div>
        </div>
    </div>
</div>

  1. ブートストラップ css を調べたところ、.row はマージン左を 20px 引き戻すことから始まるため、.spanX が作成されるたびに左に 20px のガターがあることがわかります。これは理にかなっていますが、行全体 (背景色など) にスタイルを適用し、その行内のすべての列 (私の例では span5 と span7) にスタイルを適用するにはどうすればよいですか?

  2. 第二に、列内の要素の幅を設定する最良の方法は何ですか? 私の例では、テキストボックスをspan5でネストされた行に配置することにより、左側の列の幅を埋めるようにテキストボックスのサイズを変更しようとしました。これは IE7 では機能しません。代わりに、右に 20px 移動し、右側のガターが失われます。

これを確認するには、IE7 と適切なブラウザーでhttp://jsfiddle.net/jRcJG/を確認してください。

私が得た最も近い方法は、IE ハックをまとめて入力を元に戻すことですが、これにより、右側の列の入力プリペンドが押しつぶされるなど、他の問題が発生します。

http://jsfiddle.net/JsBpV/

残念ながら、私が取り組んでいるプロジェクトは IE7 をサポートする必要があるため、これらのユーザーを無視する余裕はありません。

助けてくれてありがとう！

4

2 に答える 2

2

#2 のシンプルだが必ずしもエレガントではない解決策は、クラス内に IE スター ハックを追加することです。

input.ie-fix-left, textarea.ie-fix-left {
    *margin-left: -20px;
}

この問題の影響を受ける各入力要素にクラスを配置する必要があります。

<div class="row">
    <div class="span6">
        <input type="text" class="span6 ie-fix-left"/>
    </div>
</div>
于 2012-06-20T10:39:57.640 に答える
1
  1. .span12でdivを作成し、.span5とspan7に別のレベルの行/スパンを含めます
  2. jQuery
于 2012-06-19T16:45:30.460 に答える