बूटस्ट्रैप कॉलम के बीच स्थान कैसे निकालें?

Question

मैं बूटस्ट्रैप ग्रिड में एकाधिक कॉलम के बीच की जगह को हटाना चाहता हूं। हम शुद्ध कार्य के साथ इस कार्य या किसी अन्य बेहतर समाधान को प्राप्त करने के लिए बूटस्ट्रैप्स सीएसएस को कैसे ओवरराइट कर सकते हैं?

main.html

<div class="row"> 
    <div class="col-md-2"> 
    // stuff here for this column 
    </div> 
    <div class="col-md-10"> 
    // stuff here for columns 
    </div> 
</div> 

Answer 1

एक वर्ग को जोड़ने जब आप को दूर करने के रिक्त स्थान यह

.padding-0{ 
    padding-right:0; 
    padding-left:0; 
} 

html में

इस वर्ग

<div class="row"> 
    <div class="col-md-2 padding-0"> 
     //stuff here for this column 
    </div> 
    <div class="col-md-10 padding-0"> 
     //stuff here for columns 
    </div> 
</div> 

Answer 2

लिखने का उपयोग आप एक बना सकते हैं की जरूरत है आपके row और रीम के लिए कक्षा no-gutter ove मार्जिन/padding कि, बूटस्ट्रैप द्वारा जोड़ा है this post में सुझाव दिया की तरह:

.row.no-gutter { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 
.row.no-gutter [class*='col-']:not(:first-child), 
 
.row.no-gutter [class*='col-']:not(:last-child) { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.row > div { 
 
    background: lightgrey; 
 
    border: 1px solid; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row no-gutter"> 
 
    <div class="col-md-2"> 
 
    1 
 
    </div> 
 
    <div class="col-md-10"> 
 
    2 
 
    </div> 
 
</div>

मैं एक धूसर पृष्ठभूमि और प्रदर्शन के उद्देश्य से एक सीमा निर्धारित किया है। परिणाम देखने के लिए पूर्णस्क्रीन में देखें, कि कॉलम के बीच अब कोई जगह नहीं है। बूटस्ट्रैप में पूर्वनिर्धारित मार्जिन और पैडिंग के बारे में अधिक जानकारी found here हो सकती है।

Answer 3

मैं एक वंशज वाइल्डकार्ड चयनकर्ता के साथ पंक्ति में एक वर्ग को जोड़ने और स्तंभ बच्चों को लक्षित होगा:

HTML:

<div class="row nopadding"> 
    <div class="col-md-2"> 
     //stuff here for this column 
    </div> 
    <div class="col-md-10"> 
     //stuff here for columns 
    </div> 
</div> 

सीएसएस:

.nopadding > div[class^="col-"] { 
    padding-right: 0; 
    padding-left: 0; 
} 

Answer 4

हैं आप कम उपयोग कर रहे हैं आप स्निपेट का उपयोग कर सकते हैं और इसे पंक्ति पर लागू कर सकते हैं।

.no-gutter { 
    [class*="col-"] { 
     padding-left: 0 !important; 
     padding-right: 0 !important; 
    } 
} 

सामान्य हैं सीएसएस

.no-gutter > [class*="col-"]{ 
} 

तो जैसा

:

<div class="row no-gutter"> 
    <div class="col-md-2"> 
    //stuff here for this column 
    </div> 
    <div class="col-md-10"> 
    //stuff here for columns 
    </div> 
</div> 

Answer 5

स्तंभों पर, दोनों तरफ एक 15px गद्दी है अगर आप निकालना कि वे एक साथ बैठना चाहिए।

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { 
    padding-right: 0px; 
    padding-left: 0px; 
} 

यह स्निपेट ग्रिड-फ्रेमवर्क में पाए गए संशोधित कोड से है।

Answer 6

<div class="row"> 
    <div class="col-md-2" style="padding:0"> 
     //stuff here for this column 
    </div> 
    <div class="col-md-10" style="padding:0"> 
     //stuff here for columns 
    </div> 
</div> 

Answer 7

अंशुमान का समाधान वास्तव में काम करता है! जब आप पैडिंग को शैलियों में शून्य पर सेट करते हैं, तो यह बूटस्ट्रैप कॉलम रिक्त स्थान से छुटकारा पाता है, यानी पैडिंग: 0;

<div class = "row"> 
    <div class = "col-sm-3" style= "padding:0;"> 
    //html code here.. 
    </div> 
    <div class = "col-sm-3" style= "padding:0;"> 
    //html code here.. 
    </div> 
</div> 

Answer 8

पंक्ति पर सरल जोड़ें .no-gutter।

https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

Answer 9

बूटस्ट्रैप 4 में आप कक्षा mx-* और px-*

<div class="row mx-0"> 
    <div class="col-md-6 px-0"> 
     <p>Your content</p> 
    </div> 
    <div class="col-md-6 px-0"> 
     <p>Your content</p> 
    </div> 
</div> 

कक्षाएं mx-* और px-* डिफ़ॉल्ट बूटस्ट्रैप शैली में है जोड़ सकते हैं ताकि आप इसे मैन्युअल रूप से जोड़ने के लिए

की जरूरत नहीं है

Answer 10

बूटस्ट्रैप 4, no-gutters कक्षा शामिल है। कोई अतिरिक्त सीएसएस की आवश्यकता नहीं है ...

<div class="row no-gutters"> 
    <div class="col-md-2"> 
    // stuff here for this column 
    </div> 
    <div class="col-md-10"> 
    // stuff here for columns 
    </div> 
</div>