क्या मैं बूटस्ट्रैप में col-md-1.5 दे सकता हूं?

Question

मैं ट्विटर Boοtstrap में कॉलम समायोजित करना चाहता हूं।

मुझे बूटस्ट्रैप में पता है 12 कॉलम ग्रिड हैं। क्या 3 3 3 3 के बजाय 1.5 3.5 3.5 3.5 के लिए ग्रिड में हेरफेर करने का कोई तरीका है? वर्ग चयनकर्ता में कोई डॉट्स - और याद रखें -

Answer 1

जैसे बना सकते हैं @ bodi0 सही ढंग से कहा गया है, यह संभव नहीं है। आपको या तो बूटस्ट्रैप की ग्रिड सिस्टम की सीमा है (आप विभिन्न समाधान खोज और ढूंढ सकते हैं, here 7-कॉलम उदाहरण है) या नेस्टेड पंक्तियों का उपयोग करें। http://bootply.com/dd50he9tGe।

नेस्टेड पंक्तियों के मामले में आप अपने इच्छित सटीक परिणाम लेकिन इसी तरह की एक

<div class="row"> 
    <div class="col-lg-5"> 
     <div class="row"> 
      <div class="col-lg-4">1.67 (close to 1.5)</div> 
      <div class="col-lg-8">3.33 (close to 3.5)</div> 
     </div>  
    </div> 
    <div class="col-lg-7"> 
     <div class="row"> 
      <div class="col-lg-6">3.5</div> 
      <div class="col-lg-6">3.5</div> 
     </div>  
    </div> 
</div> 

Answer 2

संक्षिप्त उत्तर कोई (तकनीकी रूप से आप वर्ग आप चाहते हैं की जो भी नाम दे सकते हैं, लेकिन यह कोई प्रभाव नहीं पड़ेगा, जब तक कि आप अपने खुद के सीएसएस वर्ग को परिभाषित है)। लंबा जवाब फिर से नहीं है, क्योंकि Bootstrap includes a responsive, मोबाइल पहली तरल ग्रिड प्रणाली जो उचित रूप से डिवाइस के रूप में 12 कॉलम तक स्केल करती है या पोर्ट आकार बढ़ जाती है।

पंक्तियों को उचित संरेखण और पैडिंग के लिए .container (निश्चित-चौड़ाई) या .container-fluid (पूर्ण-चौड़ाई) के भीतर रखा जाना चाहिए।

• कॉलम के क्षैतिज समूह बनाने के लिए पंक्तियों का उपयोग करें।
• सामग्री कॉलम के भीतर रखा जाना चाहिए, और केवल कॉलम पंक्तियों के तत्काल बच्चे हो सकते हैं।
• .row और .col-xs-4 जैसे पूर्वनिर्धारित ग्रिड कक्षाएं जल्दी से ग्रिड लेआउट बनाने के लिए उपलब्ध हैं। अधिक अर्थपूर्ण लेआउट के लिए कम मिश्रित भी इस्तेमाल किया जा सकता है।
• कॉलम पैडिंग के माध्यम से गटर (कॉलम सामग्री के बीच अंतराल) बनाते हैं। .rows पर नकारात्मक मार्जिन के माध्यम से पहले और अंतिम कॉलम के लिए पंक्तियों में वह पैडिंग ऑफसेट है।
• नकारात्मक मार्जिन यही कारण है कि नीचे दिए गए उदाहरण पुराने हैं। ऐसा इसलिए है कि ग्रिड कॉलम के भीतर सामग्री गैर-ग्रिड सामग्री के साथ पंक्तिबद्ध है।
• ग्रिड कॉलम बारह उपलब्ध कॉलमों की संख्या निर्दिष्ट करके बनाए जाते हैं जिन्हें आप विस्तारित करना चाहते हैं। उदाहरण के लिए, तीन बराबर कॉलम तीन .col-xs-4 का उपयोग करेंगे।
• यदि एक पंक्ति में 12 से अधिक कॉलम रखा गया है, तो अतिरिक्त कॉलम का प्रत्येक समूह एक इकाई के रूप में, एक नई पंक्ति पर लपेट जाएगा।
• ग्रिड क्लास ब्रेकपॉइंट आकार से अधिक या उसके बराबर स्क्रीन चौड़ाई वाले डिवाइस पर लागू होते हैं, और छोटे उपकरणों पर लक्षित ग्रिड कक्षाओं को ओवरराइड करते हैं। इसलिए, उदा। किसी तत्व को .col-md-* कक्षा लागू करने से न केवल मध्यम उपकरणों पर इसकी स्टाइल को प्रभावित करता है बल्कि .col-lg-* कक्षा मौजूद नहीं होने पर भी बड़े उपकरणों पर लागू होता है।

आपकी समस्या का सम्भावित समाधान, वांछित चौड़ाई साथ अपने स्वयं के सीएसएस वर्ग को परिभाषित मान लीजिए कि .col-half{width:XXXem !important} तो तत्वों आप मूल बूटस्ट्रैप सीएसएस कक्षाओं के साथ चाहते हैं कि इस वर्ग को जोड़ने के जाने के लिए है।

Answer 3

यह col-md-1.5 देने के लिए बूटस्ट्रैप मानक नहीं है और आप bootstrap.min.css को संपादित नहीं कर सकते क्योंकि यह सही तरीका नहीं है। आप इस http://www.bootply.com/125259

Answer 4

आप क्लाउड बस स्तंभ की चौड़ाई को ओवरराइड ...

<div class="col-md-1" style="width: 12.499999995%"></div> 

के बाद से नहीं मिल सकता है col-md-1 चौड़ाई 8.33333333% है; बस 8.33333333 * 1.5 गुणा करें और इसे अपनी चौड़ाई के रूप में सेट करें।

Answer 5

चौड़ाई को ओवरराइट करने के लिए नई कक्षाएं बनाएं। कार्य कोड के लिए jFiddle देखें।

<div class="row"> 
    <div class="col-xs-1 col-xs-1-5"> 
    <div class="box"> 
     box 1 
    </div> 
    </div> 
    <div class="col-xs-3 col-xs-3-5"> 
    <div class="box"> 
     box 2 
    </div> 
    </div> 
    <div class="col-xs-3 col-xs-3-5"> 
    <div class="box"> 
     box 3 
    </div> 
    </div> 
    <div class="col-xs-3 col-xs-3-5"> 
    <div class="box"> 
     box 4 
    </div> 
    </div> 
</div> 

.col-xs-1-5 { 
    width: 12.49995%; 
} 
.col-xs-3-5 { 
    width: 29.16655%; 
} 
.box { 
    border: 1px solid #000; 
    text-align: center; 
} 

Answer 6

जैसा कि बूटस्ट्रैप 3 में उल्लेखित अन्य लोगों के रूप में, आप घोंसला/एम्बेड तकनीकों का उपयोग कर सकते हैं।

हालांकि बूटस्ट्रैप 4 से अब बहुत बढ़िया फीचर का उपयोग करना अधिक स्पष्ट हो रहा है। आपके पास आसानी से col-{breakpoint}-auto कक्षाओं (उदाहरण के लिए col-md-auto) का उपयोग करने का विकल्प है ताकि कॉलम का आकार स्वचालित रूप से इसकी सामग्री की प्राकृतिक चौड़ाई के आधार पर स्वचालित हो सके। this for example