बूटस्ट्रैप कॉलम चौड़ाई को कस्टमाइज़ कैसे करें?

Question

मेरे पास यह है, लेकिन मुझे लगता है कि 4 मेरी साइडबार चौड़ाई के लिए बहुत बड़ा है और 3 बहुत छोटा है (इसे 12 तक जोड़ना है)।

<div class="col-md-8"> 
    <div class="col-md-4"> 

मैं इस कोशिश की, लेकिन यह काम नहीं करता:

<div class="col-md-8.5"> 
    <div class="col-md-3.5"> 

वहाँ एक और तरीका एक समान परिणाम प्राप्त करने के लिए है?

आपकी मदद के लिए धन्यवाद!

Answer 1

@ Isherwood के जवाब पर विस्तार करने के लिए, यहाँ बूटस्ट्रैप में कस्टम -sm- चौड़ाई बनाने के लिए पूरा कोड है 3.3

सामान्य तौर पर आप एक मौजूदा स्तंभ चौड़ाई के लिए खोज करने के लिए (जैसे कि col-sm-3) और सभी शैलियों पर कॉपी चाहते हैं कि जेनेरिक लोगों सहित, उस पर लागू करें, अपनी कस्टम स्टाइलशीट पर जहां आप नई कॉलम चौड़ाई को परिभाषित करते हैं।

.col-sm-3half, .col-sm-8half { 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
} 

@media (min-width: 768px) { 
    .col-sm-3half, .col-sm-8half { 
     float: left; 
    } 
    .col-sm-3half { 
     width: 29.16666667%; 
    } 
    .col-sm-8half { 
     width: 70.83333333%; 
    } 
} 

Answer 2

आप के रूप में, बूटस्ट्रैप स्टाइलशीट अनुकूलित कर सकते हैं:

.col-md-8{ 
    width: /*as you wish*/; 
} 

तब भी उस के लिए मीडिया क्वेरी निर्धारित करते हैं, के रूप में:

@media screen and (max-width:768px){ 
    .col-md-8{ 
    width:99%; 
    } 
} 

Answer 3

आप निश्चित रूप से अपने स्वयं के वर्गों बना सकते हैं:

.col-md-3point5 {width: 28.75%} 
.col-md-8point5 {width: 81.25%;} 

मैं डिफ़ॉल्ट कॉलम के साथ गड़बड़ करने से पहले ऐसा करूँगा। आप इनके अंदर उन लोगों का उपयोग करना चाह सकते हैं।

आप शायद उन्हें मीडिया क्वेरी स्टेटमेंट के अंदर भी रखना चाहते हैं ताकि वे केवल मोबाइल से बड़े आकार के आकार के लिए आवेदन कर सकें।

Answer 4

एक 12 कॉलम ग्रिड के लिए

, आप प्रत्येक स्तंभ चौड़ाई के लिए एक कॉलम (4,16667%) के आधे से जोड़ना चाहते हैं। आपने ऐसा किया है।

उदाहरण के लिए

, कॉल-md- एक्स, .col-md- एक्स 5 निम्न मानों के साथ परिभाषित के लिए।

.col-md-1-5 { width: 12,5%; } // = 8,3333 + 4,16667 
.col-md-2-5 { width: 20,83333%; } // = 16,6666 + 4,16667 
.col-md-3-5 { width: 29,16667%; } // = 25 + 4,16667 
.col-md-4-5 { width: 37,5%; } // = 33,3333 + 4,16667 
.col-md-5-5 { width: 45,83333%; } // = 41,6667 + 4,16667 
.col-md-6-5 { width: 54,16667%; } // = 50 + 4,16667 
.col-md-7-5 { width: 62,5%; } // = 58,3333 + 4,16667 
.col-md-8-5 { width: 70,83333%; } // = 66,6666 + 4,16667 
.col-md-9-5 { width: 79,16667%; } // = 75 + 4,16667 
.col-md-10-5 { width: 87,5%; } // = 83,3333 + 4,16667 
.col-md-11-5 { width: 95,8333%; } // = 91,6666 + 4,16667 

मैंने कुछ मूल्यों को गोल किया।

दूसरा, मूल कॉल-एमडी -एक्स से सीएसएस कोड की प्रतिलिपि से बचने के लिए, कक्षा घोषणा में उनका उपयोग करें। सावधान रहें कि आपके संशोधित लोगों से पहले उन्हें जोड़ा जाना चाहिए। इस तरह, केवल चौड़ाई ओवरराइड हो जाती है।

<div class="col-md-2 col-md-2-5">...</div> 
<div class="col-md-5">...</div> 
<div class="col-md-4 col-md-4-5">...</div> 

अंत में, यह न भूलें कि कुल 12 कॉलम से अधिक नहीं होना चाहिए, जो कुल 100% है।

मुझे आशा है कि इससे मदद मिलती है!

Answer 5

आप बूटस्ट्रैप के अपने स्तंभ mixins make-xx-column() उपयोग कर सकते हैं: http: // stackoverflow

.col-md-8half { 
    .make-md-column(8.5); 
} 

.col-md-3half { 
    .make-md-column(3.5); 
}