क्यों छुपा इनपुट मेरे लेआउट को प्रभावित कर रहा है? एलएफ स्पष्टीकरण

Question

मुझे प्रत्येक ब्लॉक के लिए पृष्ठ पर कुछ आईडी स्थानांतरित करने के लिए एक छिपी हुई इनपुट का उपयोग करने की आवश्यकता है .. जो भी हो।

मैं निम्नलिखित कोड है:

<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

ऐसा इसलिए है क्योंकि आपके पास एक सीएसएस नियम (bootstrap.min.css फ़ाइल में) है जो firs-child तत्व से मेल खाता है (लेकिन केवल डिफ़ॉल्ट *shipping_box div के अंदर एक वर्ग * = "span" है)।

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

इसलिए, यदि आप div # default_shipping_box के अंदर अपने छिपे हुए इनपुट रख दिया और पहली अवधि से पहले, तो उस नियम div.span1 और thats स्टाइल नहीं है यही कारण है कि अपने टेम्पलेट afected किया गया है ।

आप एक ही फाइल करने के लिए एक सरल सीएसएस नियम जोड़ने तय कर सकते हैं ...

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

महत्वपूर्ण है, क्योंकि आप अधिक फ़ाइलें जो इस नियम overite (पूर्व है। बूटस्ट्रैप-responsive.min.css में)

शुभकामनाएं, और मुझे उम्मीद है कि यह चीयर्स, जीएमओ में मदद करता है।-

संपादित करें: बहुत धीमी एक्सडी। लिखते समय उत्तर दिया ... मैं ऊपर बताए गए कारण से सहमत हूं।

Answer 2

गूगल क्रोम के 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="" /> है।

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

आशा इस मदद करता है:

और अपने सीएसएस में इस [class*="span"] के लिए कि डिफ़ॉल्ट वर्ग है:

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

इसलिए उदाहरण के लिए इस का उपयोग करें।

Answer 3

बूटस्ट्रैप, कुछ सीएसएस कि 0 के लिए बच्चे के पहले की left-margin सेट हो जाएगा है वर्ग शामिल है span:

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

जब छिपे हुए इनपुट पहले span div ऊपर डाल दिया जाता है, इसके बाद के संस्करण margin-left: 0; संपत्ति लागू नहीं की जाएगी।

निम्नलिखित छवि से पता चलता है कि जब छिपी हुई इनपुट से पहले है, तो पहले span कक्षा में बाएं-मार्जिन है।

यह दिखाता है कि छिपे हुए इनपुट div के बाद है जब, यह है कि वहाँ कोई बाएं मार्जिन।

संपादित करें: मैं एक दो बार पीटा गया है, जबकि मैं अंतर को वर्णन करने के स्क्रीनशॉट हो रही थी है लगता है!