なぜ隠れた入力が私のレイアウトに影響していますか？ LF説明

Question

各ブロックのページにいくつかの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> 

をレイアウトが尊重されていません。 demostrationためにこの絵を参照してください。

誰かが私に理由を説明することはできますか？隠し入力は「隠されていない」ので、レイアウトに影響しないはずです。

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

ニアライン285

Answer 1

default_shipping_box div内にfirs-child要素と一致する（ただし、クラスが* = "span"の場合のみ）CSSルール（bootstrap.min.cssファイル内）があるからです。あなたはのdiv＃のdefault_shipping_box内でご隠し入力を入れて、最初のスパン前に、そのルールはdiv.span1とのthatsをスタイリングされていない場合

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

だから、あなたのテンプレートがafectedされている理由。あなたは（例をこのルールをoverite複数のファイルを持っているので、あなたが同じファイルへの単純なCSSルールを追加することができ、固定

は...

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

重要です。ブートストラップresponsive.min.cssに）

幸運と私はそれが助けてくれることを祈る 歓声、 Gmo。 -

編集： 遅すぎるXD。 書き込み中に回答...私は上記の理由に同意します。クラスが含まれている場合

Answer 2

あなたはこのクラスの入力移動すると、Google ChromeのInspestプラグインの使用：

.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> 

この：<input type="hidden" name="tracking_id" value="" />がある：<div class="span1">はこの、最初の子ではないので、これで

です。

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

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

だから、たとえばこれを使用する：

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

は、この情報がお役に立てば幸いです。

Answer 3

ブートストラップは、0に子の最初のleft-marginを設定しますいくつかのCSSを持ってspan：隠された入力は最初spanのdivの上に置かれた

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

、上記margin-left: 0;プロパティは適用されません。

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

これは隠し入力は何の左マージンがないこと、 DIV後あるときことを示しています。

編集：私は、私は違いを説明するためにスクリーンショットを取得している間に、二回殴られて持っているようです！