ट्विटर बूटस्ट्रैप सीएसएस स्थिर-द्रव रूप पोजीशनिंग

Question

मैं इस तरह एक लेआउट प्राप्त करने की कोशिश ट्विटर बूटस्ट्रैप ढांचे का उपयोग कर रहा:

इस तरह अब यह दिखाई देता है:

Current layout http://f.cl.ly/items/1n3y0F1I3D282g2U1J3Z/Screen%20Shot%202012-07-28%20at%209.09.10%20PM.png

jsFiddle fullscreen

jsFiddle

ब्राउज़र की चौड़ाई (ट्विटर बूटस्ट्रैप के सीएसएस मीडिया-प्रश्न) के आधार पर फॉर्म कंटेनर परिवर्तन की चौड़ाई। आइकन-बक्से में हमेशा 14px चौड़ाई होती है।

मैंने पाठ इनपुट चौड़ाई को भरने की कोशिश करने के लिए स्थिर-चौड़ाई-साइडबार/द्रव-सामग्री सीएसएस लेआउट के आधार पर अलग-अलग चीजों की कोशिश की है।

मुझे लगता है कि मेरा एकमात्र विकल्प मेरा स्वयं का सीएसएस मीडिया-क्वेरी बना रहा है जो टेक्स्ट इनपुट के लिए पूर्ण चौड़ाई को परिभाषित करता है।

Answer 1

कई सीएसएस ढांचे के साथ आपको padding के साथ बहुत सावधान रहना होगा। बंद यह लो

.patch-well { 
    padding: 20px; 
} 

Answer 2

बूटस्ट्रैप भी अनुमति देता है आप पूरे लेआउट तरल पदार्थ बनाने के लिए आप की जरूरत नहीं द्वारा वस्तुओं के लिए न्यूनतम चौड़ाई अनुकरण करने के लिए। आपके मामले में, आप उस नौसेना के लिए रैपर अवधि और पंक्ति बनाने की कोशिश कर सकते हैं तरल पदार्थ नहीं।

Answer 3

आप पूरे फॉर्म को span3 में डालते हैं, यह लगभग 25% पंक्ति चौड़ाई है। इसलिए, यदि संकल्प बड़ा है, span3 पूरे रूप को रखने के लिए पर्याप्त नहीं है। छोटे संकल्पों पर, span3 की चौड़ाई 100% हो जाती है, और छोटे संकल्प अच्छे दिखते हैं। बस कुछ अन्य अवधि वर्ग का उपयोग करें, और सावधानीपूर्वक सावधानीपूर्वक अवधि कक्षाओं में संख्याओं की गणना करें। Like here इसके अलावा, मैं पंक्ति वर्ग की बजाय पंक्ति-द्रव कक्षा का उपयोग करना पसंद करता हूं, चौड़ाई के साथ हेरफेर करना आसान है।

हमेशा की तरह इस

<div class="row-fluid"> 
    <div class"span3"> 
    <!-- content1 --> 
    </div> 
    <div class"span9"> 
    <div class="row-fluid"> 
     <div class="span6"> 
      <!-- content2 --> 
     </div 
     <div class="span6"> 
      <!-- content3 --> 
     </div 
    </div> 
    </div> 
</div> 

ध्यान दें कि हमेशा अगर मैं चल बिना डिजाइन में नई लाइन चाहते संरचना का उपयोग, और अगर मैं चौड़ाई आयुध डिपो पेरेंट तत्व की 100% चाहता हूँ, मैं रो-द्रव का प्रयोग करेंगे। चूंकि बच्चों के तत्वों को तत्वों को फिर से 12 का योग किया जा सकता है। इस उदाहरण में, "content1" बड़े संकल्पों में 25% चौड़ाई का उपयोग करेगा लेकिन छोटे संकल्पों में इसकी 100% चौड़ाई होगी। बड़े संकल्पों में, "content2" और "content3" में 100% माता-पिता की चौड़ाई होगी, लेकिन यह 75% कंटेनर चौड़ाई है। छोटे संकल्पों में, सभी अवधि वर्गों में 100% चौड़ाई होगी। यदि आप नहीं चाहते हैं कि कुछ मामलों में, बस अपनी कक्षाओं के साथ डिफ़ॉल्ट बूटस्ट्रैप सीएसएस ओवरराइड करें।

मुझे आशा है कि आप समझेंगे कि मेरा मुद्दा क्या है। मेरे अंग्रेजी के लिए खेद है :)

Answer 4

यह है कि आप http://jsfiddle.net/YxKfc/14/ चाहते हैं, कृपया इसे जांचें।