9

各ブロックのページにいくつかの ID を転送するために、非表示の入力を使用する必要がありました。

私は次のコードを持っています:

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <div class="span1">
            <input type="hidden" name="tracking_id" value="" />
        </div>
    </div>
</div>

このコードはうまく機能し、結果は期待どおりです。

私がこれを行う場合：

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <input type="hidden" name="tracking_id" value="" />
        <div class="span1">

        </div>
    </div>
</div>

レイアウトは尊重されません。デモストレーションについては、次の図を参照してください。

ここに画像の説明を入力

誰かが私に理由を説明できますか? 非表示の入力は「非表示」であると想定されていないため、レイアウトに影響を与えるべきではありませんか?

jsfiddle : http://jsfiddle.net/t9M3C/

285号線付近

4

3 に答える 3

6

Google Chrome の Instest プラグインを使用して、このクラスの入力を移動すると、次のようになります。

.row-fluid [class*="span"]:first-child {
     margin-left: 0;
}

削除されます。

これは、次の理由によるものです。

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <input type="hidden" name="tracking_id" value="" />
        <div class="span1">
        </div>
    </div>
</div>

This :<div class="span1">は最初の子ではなく、this:<input type="hidden" name="tracking_id" value="" />です。

そしてあなたのCSSでは、これはデフォルトのクラス[class*="span"]です：

[class*="span"] {
    float: left;
    margin-left: 30px;
}

たとえば、これを使用します。

.row-fluid .span1 {
    margin-left:0 !important;
}

お役に立てれば。

于 2012-08-15T19:42:25.227 に答える
6

default_shipping_box div 内に firs-child 要素に一致する CSS ルール (bootstrap.min.css ファイル内) があるためです (ただし、class*="span" がある場合のみ)。

.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

したがって、非表示の入力をdiv#default_shipping_box内の最初のスパンの前に配置すると、そのルールはdiv.span1をスタイリングしていないため、テンプレートが影響を受けます。

同じファイルに単純なcssルールを追加することを修正できます...

.row-fluid .span1{margin-left:0 !important;}

重要なのは、このルールを上書きするファイルが他にもあるためです (例: bootstrap-responsive.min.css)。

頑張ってください、それが乾杯に役立つことを願っています、Gmo.-

編集: XD が遅すぎます。執筆中に回答 ... 上記の理由に同意します。

于 2012-08-15T20:03:55.027 に答える
3

left-marginBootstrap には、クラスに以下が含まれている場合、子の最初の を 0 に設定する CSS がありますspan。

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }

非表示の入力が最初のspandiv の上に配置されると、上記のmargin-left: 0;プロパティは適用されません。

次の図は、非表示の入力が の前にある場合、最初のspanクラスに左マージンがあることを示しています。

DIV の上の非表示の入力

これは、非表示の入力がdiv の後にある場合、左マージンがないことを示しています。

DIV の上の下に非表示

編集:違いを説明するためにスクリーンショットを取得しているときに、2回殴られたようです!

于 2012-08-15T20:11:50.327 に答える