बूटस्ट्रैप 3 और 4 .कंटेनर-फ्लुइड विथ ग्रिड अनचाहे पैडिंग को जोड़ना

Question

मैं चाहूंगा कि मेरी सामग्री तरल हो, लेकिन .container-fluidबूटस्ट्रैप के ग्रिड के साथ उपयोग करते समय , मैं अभी भी पैडिंग देख रहा हूं। मैं पैडिंग से कैसे छुटकारा पा सकता हूं?

मैं देखता हूं कि मुझे .row के साथ पैडिंग नहीं मिलती है, लेकिन मैं कॉलम जोड़ना चाहता हूं, और जैसे ही मैं करता हूं, पैडिंग वापस आ जाती है: ओ।

मैं पूर्ण चौड़ाई पर स्तंभों का उपयोग करने में सक्षम होना चाहता हूं।

एक उदाहरण:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

समाधान मुझे मिल गया है:

ओवरराइड बूटस्ट्रैप.css, लिंके 1427 और 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

सेवा

padding-right: 0px;
padding-left: 0px;

Comments

उपयोगी लीजेक्सॉन्डेव ®

— ब्रायन डिलिंघम

क्या आप अपना प्रासंगिक कोड पोस्ट कर सकते हैं ताकि हम आपके जवाबों को आपके कोड के अनुरूप कर सकें?

— सिंपल सैंडमैन

कोड के साथ अद्यतन! जब मैं एक पंक्ति का उपयोग कर रहा हूं, न कि मेरे पास एक कॉलम होने पर मैं गद्दी को हटाना चाहता हूं।

— टिम

इसका सही हल नहीं है! मैंने @ उत्तर के साथ जाने का सुझाव दिया

— पूजा रॉय

Answer 1

आपको प्रत्येक कंटेनर में एक "पंक्ति" भी जोड़ना चाहिए जो इस मुद्दे को "ठीक" करेगा!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

Http://jsfiddle.net/3px20h6t/ देखें

Comments

धन्यवाद। जब मैं स्तंभों का उपयोग कर रहा होता हूं, तो मैं पैडिंग को हटा देता हूं। मैं यह कैसे कर सकता हूँ पर कोई विचार?

— टिम

यह केवल एक अतिरिक्त वर्ग के माध्यम से संभव है ... मैंने हटाने-गद्दी नामक एक वर्ग को परिभाषित किया है जिसमें सिर्फ एक .remove-padding {पैडिंग-बाएं: 0; गद्दी-सही: 0; मार्जिन-वाम: 0; मार्जिन-राइट: 0} जहाँ तक मुझे पता है, डिफ़ॉल्ट 15px पैडिंग को हटाने के लिए कोई पूर्वनिर्धारित क्लास नहीं है

— PAART

मैं महसूस नहीं कर सकता कि इस उत्तर में कितने उत्थान हैं, जबकि यह बूटस्ट्रैप ग्रिड सिस्टम दिशानिर्देशों का पालन नहीं करता है । परिचय अनुभाग में तीसरा नियम कहता है कि "सामग्री को स्तंभों के भीतर रखा जाना चाहिए, और केवल कॉलम ही पंक्तियों के तत्काल बच्चे हो सकते हैं।" लुकास नेल्सन का जवाब वाक्यविन्यास नियम को तोड़ने के बिना वांछित प्रभाव को प्राप्त करने के लिए उचित दृष्टिकोण प्रदान करता है।

— सियावास

यदि आपका लेआउट सूट करता है, तो आप rowसीधे col-**-*कक्षाओं के साथ कक्षा का उपयोग भी कर सकते हैं ।

— अनवर

जब यह प्रश्न का उत्तर नहीं देता है तो इसे 87 बार (और गिनती) के लिए कैसे वोट दिया जा सकता है? प्रश्न में कहा गया है कि यह तब काम करता है जब सिर्फ एक rowका उपयोग किया जाता है ... लेकिन तब नहीं जब कॉलम का उपयोग किया जाता है (जिसके लिए इस उत्तर में तथ्य को अनदेखा किया जाता है)? वैसे भी, मैं एक ही सटीक गलत 15px पैडिंग प्रश्न के रूप में प्राप्त कर रहा हूँ और यह बहुत निराशाजनक है।

— जर्क

Answer 2

कृपया बूटस्ट्रैप से वास्तविक सीएसएस ढूंढें

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

जब आप एक .container-fluidवर्ग जोड़ते हैं, तो यह 15px की क्षैतिज पैडिंग जोड़ता है, और जब आप .rowपंक्ति में सेट किए गए ऋणात्मक मार्जिन द्वारा एक वर्ग को एक बाल तत्व के रूप में जोड़ते हैं, तो उसे हटा दिया जाएगा ।

Comments

बहुत बहुत धन्यवाद। जब मैं किसी कॉलम का उपयोग कर रहा होता हूं, तो मैं इसे हटा देना चाहता हूं। मैं वास्तव में कोर बूटस्ट्रैप सीएसएस के साथ गड़बड़ नहीं करना चाहता। मुझे संदेह है कि ऐसा करने के लिए एक स्वीकृत तरीका होना चाहिए। कोई विचार?

— टिम

यदि आप पूर्णता में कॉलम का उपयोग करना चाहते हैं, तो आप पंक्ति के भीतर col-md-12 col-sm-12 css लागू कर सकते हैं

— किशोर कुमार

धन्यवाद। मैंने कोशिश की, लेकिन मुझे अभी भी पैडिंग मिलती है। इसके अलावा, मुझे दो कॉलम चाहिए। क्या मैं कुछ भूल रहा हूँ?

— टिम

आप जिस पैडिंग को देख रहे हैं, वह बूटस्ट्रैप से डिफ़ॉल्ट है, यदि आप इससे छुटकारा पाना चाहते हैं, तो अपनी स्वयं की कक्षा को कैसे जोड़ा जाए। जब ​​आप एक नया वर्ग जोड़ते हैं और बूटस्ट्रैप को ओवरराइड करना चाहते हैं, तो आप स्टाइल के बाद महत्वपूर्ण हो सकते हैं।

— किशोर कुमार

यदि दो कॉलम आप इस वर्ग को कॉलम-एमडी -6

— किशोर कुमार

Answer 3

5 साल बीत गए, और यह काफी अजीब है कि वहाँ बहुत सारे उत्तर हैं जो बूटस्ट्रैप नियमों का पालन नहीं करते (या खिलाफ हैं) या वास्तव में सवाल का जवाब नहीं देते हैं ...

संक्षिप्त उत्तर: गद्दी निकालने के लिए
बस no-guttersअपनी पंक्ति में बूटस्ट्रैप की कक्षा का उपयोग करें:

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(इसके अलावा आप </div>अपनी फ़ाइल के अंत में जोड़ना भूल गए हैं । यह ऊपर दिए गए कोड में भी ठीक किया गया है)

ध्यान दें:

ऐसे मामले हैं जब आप कंटेनर के पैडिंग को स्वयं भी निकालना चाहते हैं । इस मामले में प्रलेखन द्वारा अनुशंसित छोड़ने .containerया .container-fluidकक्षाओं पर विचार करें ।

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

लंबा जवाब:

आपके द्वारा प्राप्त की जाने वाली गद्दी वास्तव में बूटस्ट्रैप के दस्तावेज में दर्ज हैं :

पंक्तियाँ स्तंभों के लिए आवरण हैं। प्रत्येक स्तंभ में उनके बीच के स्थान को नियंत्रित करने के लिए क्षैतिज पैडिंग (जिसे एक नाली कहा जाता है) है। यह पैडिंग तब नकारात्मक हाशिये वाली पंक्तियों पर अंकित की जाती है। इस तरह, आपके कॉलम की सभी सामग्री नेत्रहीन बाईं ओर नीचे संरेखित होती है।

और समाधान के बारे में, जिसे प्रलेखित किया गया था:

कॉलम में अलग-अलग कॉलम के बीच गटर बनाने के लिए क्षैतिज पैडिंग है, हालांकि, आप पंक्तियों से मार्जिन को हटा सकते हैं और एरो -गटर के साथ कॉलम से पैड पर।

कंटेनर छोड़ने के बारे में:

एक किनारे से डिजाइन की आवश्यकता है? माता-पिता .container या .container-fluid को छोड़ें।

बोनस: अन्य उत्तरों पर मिली गलतियों के बारे में

• बूटस्ट्रैप के कंटेनर क्लासेस को हैक करने के बजाय सुनिश्चित करें कि आपने सभी सामग्री को col-s में डाल दिया है और row-s को दस्तावेज़ीकरण के रूप में लपेट दिया है :

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

• यदि आपको अभी भी हैक करना है (बस अगर किसी ने पहले ही चीजों को गड़बड़ कर दिया है और आपको अपने मुद्दे को जल्दी से ठीक करने की आवश्यकता है) तो बूटस्ट्रैप का उपयोग px-0क्षैतिज पैडिंग को हटाने pl-0 pr-0या अपनी शैलियों को फिर से स्थापित करने पर विचार करें।

Comments

.container-fluidअभी भी शामिल है padding-right: 15pxऔर padding-left: 15px, जिसका अर्थ है कि आप अभी भी अपने तरीके का उपयोग करके खिड़की से फ्लश नहीं कर पाएंगे। आपको अभी भी कुछ ऐसा करने की आवश्यकता होगी container-fluid px-0।

— 15

उस मामले में प्रलेखन केवल "माता-पिता को छोड़ दें। अनुचर या। द्रव-तरल पदार्थ" की सिफारिश करता है । । मैंने उस उत्तर को भी शामिल किया है।

— बस शैडो

Answer 4

मुझे लगता है कि मुझे टिम के समान आवश्यकता थी, लेकिन कोई भी उत्तर सामान्य आंतरिक गटर के समाधान के साथ 'व्यूपोर्ट एज-टू-एज कॉलम के लिए प्रदान नहीं करता है। या इसे लगाने का एक और तरीका: मैं अपने पहले और आखिरी कॉलम को कंटेनर की गद्दी में तोड़ने और व्यूपोर्ट के किनारे तक प्रवाहित करने के लिए कैसे प्राप्त कर सकता हूं, जबकि अभी भी कॉलम के बीच सामान्य गटर बनाए हुए हैं।

मैं जो बता सकता हूं, उससे कोई साफ और साफ समाधान नहीं है। यह मेरे लिए काम करता है, लेकिन यह बूटस्ट्रैप द्वारा समर्थित किसी भी चीज के बाहर है। लेकिन यह अभी के लिए काम करता है (बूटस्ट्रैप 3.3.5 और 4.0-अल्फा)।

http://www.bootply.com/ioWBaljBAd

नमूना HTML:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

सीएसएस:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

divकंटेनर पैडिंग में पुश करने के लिए अतिरिक्त -15px मार्जिन उत्पन्न करने के लिए पंक्ति और कॉलम के बीच में घोंसला बनाना है । अतिरिक्त नकारात्मक मार्जिन छोटे व्यूपोर्ट पर क्षैतिज स्क्रॉल (व्हॉट्सएप में) बनाता है। को जोड़ overflow-x: hiddenरहा है.rowइसे दबाने के आवश्यक है।

इस के लिए एक ही काम करता है .container-fluidके रूप में .container।

Comments

क्यों नहीं.full-width-row > div { padding: 0; }

— बामेह

यह काम नहीं करता है, आप अभी भी पंक्ति के आरंभ और अंत में एक गटर प्राप्त करते हैं: bootply.com/eM8y3kkfbi

— लुकास नेल्सन

Answer 5

तो यहाँ बूटस्ट्रैप 4 के लिए संक्षिप्त सारांश दिया गया है:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

इससे मेरा काम बनता है।

Comments

बूटस्ट्रैप 4 के लिए, यह सही उत्तर और सबसे अच्छा अभ्यास है।

— सियाफिक फ्रीमैन

@SyafiqZainal, और यह भी नीचे मेरे मूल उत्तर का एक डुप्लिकेट है (बहुत पहले पोस्ट किया गया): D तो, अब मैं सोच रहा हूँ, कि क्या StackOverflow में एक ही उत्तर पोस्ट करना ठीक है।

— छाया

Answer 6

बाएं और दाएं पैडिंग को 0 के रूप में चिह्नित करके कंटेनर-तरल पदार्थ द्वारा जोड़े गए पैडिंग को नकारना क्यों नहीं है ?

<div class="container-fluid pl-0 pr-0">

और भी बेहतर तरीका? कंटेनर स्तर (क्लीनर) पर कोई पैडिंग नहीं

<div class="container-fluid pl-0 pr-0">

Comments

pl-0 pr-0के लिए बदला जा सकता हैpx-0

— पैट्रिक मैकडॉनल्ड्स

Answer 7

आपको केवल बूटस्ट्रैप के .container वर्ग में इन CSS गुणों की आवश्यकता होती है और आप उसके अंदर सामान्य ग्रिड प्रणाली रख सकते हैं, बिना कंटेनर की कोई सामग्री उसके बाहर होगी (व्यूपोर्ट में स्क्रॉल-एक्स के बिना)।

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

सीएसएस:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

Answer 8

नए अल्फा संस्करणों में उन्होंने उपयोगिता रिक्ति कक्षाएं शुरू की हैं । संरचना को तब ट्विक किया जा सकता है यदि आप उन्हें चतुर तरीके से उपयोग करते हैं।

यूटिलिटी क्लासेस की जगह

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0और pr-0स्तंभों से अग्रणी और अनुगामी गद्दी को निकाल देगा। एक समस्या छोड़ दी गई है एक कॉलम की एम्बेडेड पंक्तियाँ, क्योंकि उनके पास अभी भी नकारात्मक मार्जिन है। इस मामले में:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

संस्करण अंतर

यह भी ध्यान दें कि उपयोगिता रिक्ति वर्गों को संस्करण के बाद से बदल दिया गया था 4.0.0-alpha.4। इससे पहले कि वे 2 डैश जैसे => p-x-0और से अलग हो गएp-l-0 और इतने पर ...

संस्करण 3 के लिए विषय पर बने रहने के लिए: यह वही है जो मैं बूटस्ट्रैप 3 परियोजनाओं पर उपयोग करता हूं और इस विशेष रिक्ति उपयोगिता के लिए कम्पास सेटअप शामिल करता हूं, bootstrap-sass (संस्करण 3) या bootstrap(संस्करण 4.0.0-अल्फा.3) में डबल डैश के साथ या bootstrap(एकल संस्करण के साथ संस्करण 4.0.0-अल्फा 4 और ऊपर)।

इसके अलावा, नवीनतम संस्करण (एस) 5 गुना अनुपात तक (पूर्व): pt-5 केवल 3 के बजाय पैडिंग-टॉप 5) तक जाते हैं।

---

दिशा सूचक यंत्र

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

सीएसएस उत्पादन

आप हमेशा एक उत्पन्न सीएसएस फ़ाइल से पैडिंग रिक्ति कक्षाओं को कॉपी / पेस्ट कर सकते हैं।

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

Answer 9

मुझे लगता है कि किसी ने भी सवाल का सही जवाब नहीं दिया है। मेरा कार्य समाधान है: 1. बस कंटेनर-द्रव वर्ग उदाहरण (.maxx) के साथ एक और वर्ग घोषित करें।

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

2. फिर सीएसएस भाग में विशिष्टता का उपयोग करते हैं:

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

यह 100% काम करेगा और बाएँ और दाएँ से पैडिंग को हटा देगा। आशा है कि ये आपकी मदद करेगा।

Comments

px-0बूटस्ट्रैप 4 के लिए बाएं और दाएं पैडिंग को कैसे सेट किया जाए

— विंसेंट

Answer 10

आप configuratior के साथ काम कर रहे हैं, तो आप सेट कर सकते हैं @grid-gutter-widthसे 30pxकरने के लिए0

Answer 11

मैंने उपयोग किया है <div class="container-fluid" style="padding: 0px !important"> और यह काम करने लगता है।

Comments

शैली से बच सकते हैं और इसके बजाय उपयोगिता वर्गp-0

— iCrus

Answer 12

मैं खुद इसके साथ संघर्ष कर रहा हूं और मुझे आखिरकार विश्वास है कि मैंने इसका पता लगा लिया है। यह अविश्वसनीय है कि इस सवाल पर कितने विफल उत्तर हैं

आपको बस अपने सभी .col तत्वों से पैडिंग को हटाना है, और .container-fluid से भी पैडिंग को हटाना है।

मैंने अपनी सीएसएस फ़ाइल में निम्न जोड़कर अपनी स्वयं की परियोजना में थोड़ा ढिलाई बरती:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

मेरे पास उन सभी अलग-अलग कॉल आकारों के हिसाब के लिए अलग-अलग कॉल आकार हैं। मुझे विश्वास है कि सीएसएस लिखने के लिए एक क्लीनर तरीका है लेकिन यह अंतिम परिणाम दिखाता है।

Answer 13

का प्रयोग करें px-0पर containerऔर no-guttersपर rowpaddings दूर करने के लिए।

बूटस्ट्रैप 4 से उद्धृत - ग्रिड सिस्टम :

पंक्तियाँ स्तंभों के लिए आवरण हैं। प्रत्येक स्तंभ में उनके बीच के स्थान को नियंत्रित करने के लिए क्षैतिज पैडिंग (जिसे एक नाली कहा जाता है) है। यह पैडिंग तब नकारात्मक हाशिये वाली पंक्तियों पर अंकित की जाती है। इस तरह, आपके कॉलम की सभी सामग्री नेत्रहीन बाईं ओर नीचे संरेखित होती है।

कॉलम में अलग-अलग कॉलम के बीच गटर बनाने के लिए क्षैतिज पैडिंग है, हालांकि, आप पंक्तियों से मार्जिन को हटा सकते हैं और इन .no-guttersपर कॉलम से पैडिंग कर सकते हैं .row।

निम्नलिखित एक लाइव डेमो है:

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

कारण यह है कि काम करता है container-fluidऔर colदोनों के पास पैडिंग है:

padding-right: 15px;
padding-left: 15px;

px-0क्षैतिज पैडिंग को हटा सकता है container-fluidऔर पैडिंग no-guttersको हटा सकता है col।