बूटस्ट्रैप 3 में कॉलम से पैडिंग निकालें

Question

मुसीबत:

बूटस्ट्रैप 3 में col-md- * के दाईं और बाईं ओर पैडिंग / मार्जिन निकालें।

HTML कोड:

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

वांछित उत्पादन:

वर्तमान में यह कोड दो कॉलम के दाईं और बाईं ओर पैडिंग / मार्जिन जोड़ता है। मैं सोच रहा हूं कि पक्षों पर इस अतिरिक्त स्थान को हटाने के लिए मैं क्या याद कर रहा हूं?

नोटिस:

यदि मैं "col-md-4" हटाता हूं तो दोनों कॉलम 100% तक विस्तारित हो जाते हैं लेकिन मैं चाहता हूं कि वे एक-दूसरे के बगल में हों।

Comments

बूटस्ट्रैप 4 उपयोग के लिए pl-0 pr-0यानी<div class="col-7 pl-0 pr-0">

— मुहम्मद शहजाद

इससे भी छोटा, px-0जिसमें बाएँ और दाएँ दोनों शामिल हैं।

— थियोफाइल

Answer 1

आप सामान्य रूप .rowसे दो कॉलम लपेटने के लिए उपयोग करेंगे, ऐसा नहीं है .col-md-12- यह एक कॉलम दूसरे कॉलम को एन्कैश कर रहा है। बाद में, .rowअतिरिक्त मार्जिन और पैडिंग नहीं होती है जो एक col-md-12स्थान लाएगा और उस स्थान को भी छूट देगा जो एक कॉलम नकारात्मक बाएं और समान मार्जिन के साथ पेश करेगा।

<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

यदि आप वास्तव में पैडिंग / मार्जिन निकालना चाहते हैं, तो प्रत्येक चाइल्ड कॉलम के लिए मार्जिन / पेडिंग को फ़िल्टर करने के लिए एक क्लास जोड़ें।

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

Comments

क्या कंटेनर श्रेणी में .without- पेडिंग भी आवश्यक है? मैं कहूंगा कि .nopadding को .col-md-8 div में आपके द्वारा प्रदान किए गए CSS कोड के साथ पर्याप्त है।

— चार्ल्स इंगॉल्स

मैं अपने कस्टम सीएसएस में आमतौर पर 3 अतिरिक्त कक्षाएं बनाता हूं, .padding-0जो कि बाएं और दाएं पैडिंग (केवल) को 0 पर सेट करता है; .padding-smयह 2px के .padding-mdलिए पैडिंग सेट करता है और यह पैडिंग को 5px पर सेट करता है। सामान्य पैडिंग 15px है (जब तक कि अनुकूलित न हो), इसलिए ये अतिरिक्त कक्षाएं पर्याप्त हैं।

— माइकलजयटेल

वैसे .row चले गए यह नई लाइन है

— ozanmuyes

सामान्य पैडिंग को वैरिएबल्स में कस्टमाइज़ किया जाता है। @ ग्रिड-गटर-चौड़ाई: 30 पीएक्स;

— व्लादिस्लाव लेझनेव

क्या पैडिंग को हटाने या क्लास बनाने के लिए कोई पूर्वनिर्धारित बूटस्ट्रैप है केवल समाधान

— गौरव अग्रवाल

Answer 2

बूटस्ट्रैप 4 ने .no-guttersवर्ग जोड़ा है ।

बूटस्ट्रैप 3 : मैं हमेशा इस स्टाइल को अपने बूटस्ट्रैप LESS / SASS में जोड़ता हूं:

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

फिर HTML में आप लिख सकते हैं:

<div class="row row-no-padding">

यदि आप केवल बाल स्तंभों को लक्षित करना चाहते हैं तो आप बच्चे के चयनकर्ता (धन्यवाद जॉन वू) का उपयोग कर सकते हैं।

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

आप केवल कुछ उपकरण आकार (SASS उदाहरण) के लिए गद्दी निकालना चाहते हैं:

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

आप मीडिया क्वेरी के अधिकतम-चौड़ाई वाले हिस्से को हटा सकते हैं यदि आप चाहते हैं कि यह छोटे उपकरणों को ऊपर की ओर सपोर्ट करे।

Comments

यह नेस्टिंग (जो एसएएसएएस में भी है) से अलग सादे सीएसएस है, इसलिए इसे समान काम करना चाहिए।

— शहादत

मेरा सुझाव है कि प्रदर्शन में सुधार के लिए सीधे बाल चयनकर्ता का उपयोग करें। & >[class*="col-"]इसके बजाय उपयोग करें ।

— जॉन वू

@ जॉनवो जो नेस्टेड पंक्तियों को शैली को विरासत में लेने से रोकता है, जिससे मुझे थोड़ी परेशानी हुई। धन्यवाद!

— ट्रॉय कार्लसन

आपको वास्तव में [class^="col-"], [class*=" col-"] {...}इसके बजाय का उपयोग करना चाहिए ताकि आप गलती से foocol-उदाहरण के लिए नामित कक्षाओं को लक्षित न करें । यह उन तत्वों को लक्षित करेगा जिनके पास प्रारंभ में उस वर्ग का नाम है या इसे द्वितीयक वर्ग के रूप में और साथ ही लक्ष्यीकरण के बिना जहां स्ट्रिंग को किसी अन्य वर्ग नाम के भाग के रूप में पाया जाता है।

— ब्रेट

पवित्र धुआँ! मैंने अभी-अभी घंटों सोचा था कि मैं एक iOS व्यूपोर्ट बग से जूझ रहा था क्योंकि मेरा iPhone 6 कभी-कभी (लेकिन असंगत रूप से) मेरे वेबपेज पर ऑटोज़ूम होगा। कर्नल पैडिंग को हटाने के बाद, मुझे लगता है कि ऑटोज़ूम उचित रूप से काम करता है! धन्यवाद!

— रयान

Answer 3

कॉलम पर सिर्फ पैडिंग को कम करने से ट्रिक नहीं बनेगी, क्योंकि आप पेज की चौड़ाई को बढ़ाएंगे, जिससे यह आपके बाकी पेज के साथ असमान हो जाएगा। आपको पंक्ति पर नकारात्मक मार्जिन को समान रूप से कम करने की आवश्यकता है। @Martinedwards 'कम उदाहरण लेना:

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

Comments

यह केवल एक समस्या है जब आपकी पंक्ति कंटेनर या किसी अन्य कॉलम में नहीं है। नकारात्मक मार्जिन बस उन तत्वों से गद्दी को भर देता है

— फ्रेड स्टार्क

मुझे !importantइस काम को करने के लिए दोनों हाशिये की ज़रूरत थी

— फिलिप बिजकर

Answer 4

विशेष रूप से एसएएसएस मिश्रण के लिए:

@mixin no-padding($side) {
    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

फिर HTML में, आप उपयोग कर सकते हैं

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

निश्चित रूप से, आप केवल उन घोषणाओं को देख सकते हैं, जिनकी आपको आवश्यकता है।

Comments

Im इस स्थिति में इस मिश्रण (उस के लिए धन्यवाद) का उपयोग करने की कोशिश कर रहा है और यह काम नहीं कर रहा है। .banners-home { @include make-row(); .banner-comprar,.banner-pq{ @include no-padding("all"); @include make-xs-column(6); @include make-sm-column(6); @include make-md-column(6); @include make-lg-column(6); } .banner-simulador{ @include no-padding("all"); @include make-xs-column(12); @include make-sm-column(12); @include make-md-column(12); @include make-lg-column(12); } }

— jpcmf80

मुझे पता है कि क्या गलत है। मुझे इस समाधान कार्यों के लिए एक और मिश्रण बनाने की आवश्यकता है। Btw, SASS मिश्रण के लिए धन्यवाद :)

— मिक्सिन

मैं बस इसे @mixin nopadding{ padding:0!important; }अपने में बनाता हूं _mixin.scss और फिर जोड़ता हूं@include nopadding; ऊपर दिए गए कोड में । :)

— jpcmf80

Answer 5

इसके बाद केवल बूटस्ट्रैप 4 पर उपलब्ध है

<div class="p-0 m-0">
</div>

नोट: .p-0 और .m-0 पहले से ही बूटस्ट्रैप जोड़ा गया है

Answer 6

बस "नो-पेडिंग" जोड़ें जो कि बूटस्ट्रैप 3 में इनबिल्ट क्लास है

Comments

कॉलम में जोड़ते समय मेरे लिए काम करता है। कई पेडिंग से बचने के लिए नेस्टेड कॉलम का उपयोग करते समय इसका उपयोग किया जाना चाहिए।

— निकोलसबर्नियर

इसके अलावा, कोई no-gutterअभिभावक के लिए कक्षा जोड़ सकता है .row।

— आर्टबीट

@ArtBIT मुझे लगता है कि आपको v4-alpha.getbootstrap.com/layout/grid/#no-gutters केno-gutters अनुसार कोड करना होगा । यह इनबिल्ट नहीं है।

— कलस्टर

Answer 7

बूटस्ट्रैप 4 में ऐसा करने के लिए एक मूल वर्ग है: .no-guttersअभिभावक को कक्षा जोड़ें.row

Answer 8

एक अन्य उपाय, केवल तभी संभव है जब आप इसके लेस स्रोतों से बूटस्ट्रैप संकलित करते हैं, यह उस चर को फिर से परिभाषित करना है जो स्तंभों के लिए पैडिंग सेट करता है।

आपको variables.lessफ़ाइल में चर मिलेगा : इसे कहा जाता है @grid-gutter-width।

यह सूत्रों में इस तरह वर्णित है:

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

इसे 0 पर सेट करें, संकलित करें bootstrap.lessऔर परिणाम को शामिल करें bootstrap.css। आप कर चुके हैं। यह एक अतिरिक्त नियम को परिभाषित करने का विकल्प हो सकता है, यदि आप पहले से ही बूटस्ट्रैप स्रोतों का उपयोग कर रहे हैं जैसे कि मैं हूं।

Answer 9

बूटस्ट्रैप 3, संस्करण 3.4.0 के बाद से , गद्दी को हटाने का एक आधिकारिक तरीका है: वर्गrow-no-gutters ।

प्रलेखन से उदाहरण :

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Answer 10

बूटस्ट्रैप 4 में वर्ग है। नैनो-गटर जो आप पंक्ति तत्व में जोड़ सकते हैं।

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-md-12">
            [YOUR CONTENT HERE]
        </div>
    </div>
</div>

संदर्भ: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Answer 11

[class*="col-"]
  padding: 0
  margin: 0

Answer 12

उपरोक्त समाधानों में से किसी ने भी मेरे लिए पूरी तरह से काम नहीं किया। इस उत्तर के बाद मैं कुछ बनाने में सक्षम था जो मेरे लिए काम करता है। यहां मैं केवल छोटे स्क्रीन तक इसे सीमित करने के लिए एक मीडिया क्वेरी का उपयोग कर रहा हूं।

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}

Answer 13

बूटस्ट्रैप 3.7.7 या उससे कम का उपयोग करके बी / डब्ल्यू कॉलम से रिक्ति निकालें।

.no-gutter एक कस्टम वर्ग है जिसे आप अपनी पंक्ति DIV में जोड़ सकते हैं

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }

Comments

इसने काम किया और इसे LESS या SASS की आवश्यकता नहीं थी। मैंने ध्यान दिया कि मुझे अपनी पंक्ति में कंटेनर वर्ग जोड़ना था, हालाँकि, साथ ही साथ इस अतिरिक्त स्टाइल को भी लागू करना था margin:0 auto;:।

— १३:

देवताओं को इसके साथ यह महसूस करना होगा कि एक बार ऐसा करने के बाद, उन्हें स्तंभ के अंदर एक DIV बनाने और अपने स्वयं के नाली आकार बनाने के लिए मार्जिन लागू करने की आवश्यकता है।

— वोलोमाइक

Answer 14

<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>

<div class="col-md-4">
    <div class="widget row">
        <div class="widget-header">
            <h3>Dimensions</h3>
        </div>

        <div class="widget-content" id="">
            <div id='jqxWidget'>
                <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                <div style="clear:both;" id="listBoxB"></div>

            </div>
        </div>
    </div>
</div>

<div class="col-md-8">
    <div class="widget row">
        <div class="widget-header">
            <h3>Results</h3>
        </div>

        <div class="widget-content">
            <div id="map_canvas" style="height: 362px;"></div>
        </div>
    </div>
</div>

आप col-md-4 के अंदर div में पंक्ति की एक कक्षा जोड़ सकते हैं और पंक्ति का -15px मार्जिन स्तंभों से नाली को बाहर निकाल देगा। बूटस्ट्रैप 3 में गटर और पंक्तियों के बारे में यहाँ अच्छी व्याख्या ।

Answer 15

मुझे लगता है कि यह सिर्फ उपयोग करने के लिए आसान है

margin:-30px;

बूटस्ट्रैप द्वारा निर्धारित मूल मान को ओवरराइड करने के लिए।

मैंने कोशिश की

margin: 0px -30px 0px -30px;

और यह मेरे लिए काम किया।

Answer 16

अपने कॉलमों को एक .row में लपेटें और उस div को "no-gutter" नामक एक वर्ग में जोड़ें।

<div class="container">
  <div class="row no-gutter">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>
</div>

फिर अपने CSS फ़ाइल में सामग्री के नीचे पेस्ट करें

.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;
}

Answer 17

सीएसएस संदर्भ के साथ बूटस्ट्रैप गटर को हटाएं / अनुकूलित करें: http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

/* remove */
.gutter-0.row {
  margin-right: -0px;
  margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

/* customize */
.gutter-6.row {
  margin-right: -3px;
  margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
  padding-right: 3px;
  padding-left: 3px;
}
    

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Answer 18

आप मार्जिन निकालने के लिए एक नया वर्ग बना सकते हैं और उस तत्व पर लागू कर सकते हैं जहाँ आप अतिरिक्त मार्जिन निकालना चाहते हैं:

.margL0 { margin-left:0 !important }

महत्वपूर्ण : यह डिफ़ॉल्ट मार्जिन को हटाने या वर्तमान मार्जिन मूल्य को अधिलेखित करने में आपकी सहायता करेगा

और उस div पर लागू करें जिसमें से आप बाईं ओर से मार्जिन निकालना चाहते हैं

Answer 19

<style>
.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>

Comments

क्या आप अपने उत्तर के साथ स्पष्टीकरण प्रदान कर सकते हैं।

— पीकेबीर्बी

<head> टैग से पहले या बाद में ये कोड प्रदान करें ताकि यह उस पृष्ठ में उन वर्ग गुणों को ओवरराइड कर दे

— Sreelakshmi

Answer 20

आप अपने स्तंभों के प्रबंधन मार्जिन और पैडिंग जैसे बूटस्ट्रैप का उपयोग करके कम मिश्रण बना सकते हैं, जैसे

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

उपयोग:

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

इसी तरह मार्जिन / पैडिंग शून्य के लिए आप उपयोग कर सकते हैं,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px

Comments

ऐसा लगता है कि तत्कालीन लिंक पर सारगर्भित सूचना है। यह एसओ का तरीका नहीं है। अपने उत्तर में आवश्यक जानकारी डालें!

— जोगो

या लोग केवल 159 उत्थान और कोई डाउनवोट के साथ स्वीकार किए गए उत्तर का उपयोग नहीं कर सकते थे, दो साल से यहां है। या दस अपवोट के साथ कई अन्य उत्तरों में से एक। आपको उस प्रतियोगिता के विरुद्ध इस पृष्ठ पर स्थान अर्जित करने के लिए अधिक प्रयास करना होगा।

— टॉम ज़िक

Answer 21

विटाली सिलिन के जवाब पर बिल्डिंग । न केवल उन मामलों को कवर करना, जहां हम पैडिंग नहीं करना चाहते हैं, बल्कि ऐसे मामले भी हैं जहां हमारे पास मानक आकार के पैडिंग हैं।

इस कोड का लाइव रूपांतरण CSS पर sassmeister.com पर देखें

@mixin padding($side, $size) {
    $padding-size : 0;
    @if $size == 'xs' { $padding-size : 5px; }
    @else if $size == 's' { $padding-size : 10px; }
    @else if $size == 'm' { $padding-size : 15px; }
    @else if $size == 'l' { $padding-size : 20px; }

    @if $side == 'all' {
        .padding--#{$size} {
            padding: $padding-size !important;
        }
    } @else {
        .padding-#{$side}--#{$size} {
            padding-#{$side}: $padding-size !important;
        }
    }
}

$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
  @each $current-size in $sizes-list {
    @include padding($current-side,$current-size);
  }
}

इसके बाद आउटपुट:

.padding--none {
  padding: 0 !important;
}

.padding--xs {
  padding: 5px !important;
}

.padding--s {
  padding: 10px !important;
}

.padding--m {
  padding: 15px !important;
}

.padding--l {
  padding: 20px !important;
}

.padding-top--none {
  padding-top: 0 !important;
}

.padding-top--xs {
  padding-top: 5px !important;
}

.padding-top--s {
  padding-top: 10px !important;
}

.padding-top--m {
  padding-top: 15px !important;
}

.padding-top--l {
  padding-top: 20px !important;
}

.padding-right--none {
  padding-right: 0 !important;
}

.padding-right--xs {
  padding-right: 5px !important;
}

.padding-right--s {
  padding-right: 10px !important;
}

.padding-right--m {
  padding-right: 15px !important;
}

.padding-right--l {
  padding-right: 20px !important;
}

.padding-bottom--none {
  padding-bottom: 0 !important;
}

.padding-bottom--xs {
  padding-bottom: 5px !important;
}

.padding-bottom--s {
  padding-bottom: 10px !important;
}

.padding-bottom--m {
  padding-bottom: 15px !important;
}

.padding-bottom--l {
  padding-bottom: 20px !important;
}

.padding-left--none {
  padding-left: 0 !important;
}

.padding-left--xs {
  padding-left: 5px !important;
}

.padding-left--s {
  padding-left: 10px !important;
}

.padding-left--m {
  padding-left: 15px !important;
}

.padding-left--l {
  padding-left: 20px !important;
}

Answer 22

कभी-कभी आप स्तंभों के लिए इच्छित पैडिंग खो सकते हैं। वे एक-दूसरे से चिपके रहते हैं। इसे रोकने के लिए, आप निम्नानुसार कक्षा को अपडेट कर सकते हैं:

<div class="col-md-3 NoPaddingForChildren">
        <div class="col-md-6">
                    <label>Id</label>
                    <input ng-model="ID" class="form-control">
        </div>
        <div class="col-md-6">
                    <label>Value</label>
                    <input ng-model="Val" class="form-control">
        </div>
</div>

और इसी वर्ग:

.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
    padding-left: 0;
    padding-right: 0;
}

.NoPaddingForChildren > div:first-child {
    padding-left: 0;
}

.NoPaddingForChildren > div:last-child {    
    padding-right: 0;
}

Answer 23

यदि आप SASS फ़ाइलों के साथ बूटस्ट्रैप डाउनलोड करते हैं, तो आप उस कॉन्फ़िगर फ़ाइल को संपादित करने में सक्षम होंगे जहाँ स्तंभों के मार्जिन के लिए एक सेटिंग है और फिर इसे सहेजें, उस तरह से SASS स्तंभों की नई चौड़ाई की गणना करता है

Answer 24

आप अपने बूटस्ट्रैप ग्रिड सिस्टम को कस्टमाइज़ कर सकते हैं और अपने कस्टम उत्तरदायी ग्रिड को परिभाषित कर सकते हैं।

से निम्नलिखित गटर चौड़ाई के लिए अपने डिफ़ॉल्ट मान परिवर्तित @grid-gutter-width = 30pxकरने के लिए@grid-gutter-width = 0px

(गटर की चौड़ाई स्तंभों के बीच स्थित है। यह बाएं और दाएं आधे हिस्से में विभाजित है।)

Answer 25

मैं अभी भी हर स्क्रीन साइज में हर पैडिंग पर नियंत्रण रखना पसंद करता हूं, इसलिए यह सीएसएस आप लोगों के लिए उपयोगी हो सकता है :)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}

Answer 26

आप कांटा का उपयोग कर सकते हैं

https://github.com/srghma/bootstrap-rubygem-without-gutter/commit/8e42c16dcc2f132af3489c2275dd7460b524d437

gem "bootstrap", github: "srghma/bootstrap-rubygem-without-gutter"