爲什麼隱藏的輸入會影響我的佈局？ 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> 

佈局的不尊重。看到這張圖片的筆畫演示：

有人能解釋爲什麼給我？隱藏的輸入不會被「隱藏」，因此它們不應該影響佈局？

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

近線285

Answer 1

是因爲你有一個css規則（在bootstrap.min.css文件中），它與default_shipping_box div內的firs-child元素相匹配（但只有當類有* =「span」時）。

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

所以，如果你把你的隱藏輸入的DIV＃default_shipping_box內部和第一跨度之前，則該規則不定型div.span1而這就是爲什麼你的模板已經受其影響。

可以固定增加一個簡單的CSS規則相同的文件...

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

重要的，是因爲你有更多的文件，誰overite此規則（例如，在引導，responsive.min.css ）

祝你好運，我希望它可以幫助 乾杯， Gmo。 -

編輯： XD太慢。 在寫作時回答...我同意上面解釋的原因。

Answer 2

使用谷歌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> 

此：<div class="span1">不是第一個孩子，這一點：<input type="hidden" name="tracking_id" value="" />是。

，並在你的CSS這是[class*="span"]是默認的類是：

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

所以用這個例子：

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

希望這有助於。

Answer 3

引導有一些CSS將在第一個孩子的left-margin設置爲0，如果類包含span：

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

當隱藏的輸入被放在第一span DIV以上，上述margin-left: 0;財產將不適用。

下圖顯示當隱藏輸入爲之前，則第一個span類具有左邊距。

這表明，當隱藏的輸入是股利後，沒有左緣。

編輯：我似乎有被打了兩次，而我得到的截圖來說明區別！