बूटस्ट्रैप 3 - क्यों पंक्ति वर्ग अपने कंटेनर से व्यापक है?

116

मैंने अभी बूटस्ट्रैप 3 का उपयोग करना शुरू किया है। मुझे यह समझने में मुश्किल समय आ रहा है कि पंक्ति वर्ग कैसे काम करता है। वहाँ एक रास्ता से बचने के लिए है padding-leftऔर padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

twitter-bootstrap twitter-bootstrap-3

— Petran
स्रोत

@ क्या यह अभी भी सही है? मुझे यकीन नहीं है अगर आपको लगता है कि वे सही तरीके से काम नहीं करते हैं, क्योंकि मैं उनका उपयोग कर रहा हूं और वे काम करना चाहते हैं।

— सेरेल

1

@Cereal: अब और नहीं। यह v3.0.2 में जोड़ा गया था

— adrift

3

क्योंकि बूटस्ट्रैप पंक्ति में -15px बाएँ और दाएँ हाशिये हैं।

संभवतः आपकी समस्या नहीं है लेकिन किसी और के लिए एक ही प्रकार का मुद्दा है: सुनिश्चित करें कि आपके पास अपने divs पर केवल एक वर्ग विशेषता है। मैंने गलती से उन्हें दोगुना कर दिया और यही मुद्दा मिला।

— वन ट्रू कोल्टर

151

सभी ग्रिड सिस्टम में, प्रत्येक कॉलम के बीच में गटर होते हैं। बूटस्ट्रैप की प्रणाली इस गटर को बनाने के लिए प्रत्येक कॉलम के बाएँ और दाएँ दोनों पर 15px की पैडिंग सेट करती है।

मुद्दा यह है कि पहले कॉलम में बाईं तरफ आधा गटर नहीं होना चाहिए, और आखिरी में दाईं ओर आधा गटर नहीं होना चाहिए। उन स्तंभों पर किसी प्रकार .firstया .lastवर्ग का उपयोग करने के बजाय, जैसा कि कुछ ग्रिड सिस्टम करते हैं, वे .rowवर्ग को नकारात्मक हाशिये पर सेट करने के लिए निर्धारित करते हैं जो स्तंभों के गद्दी से मेल खाते हैं। यह पहले और आखिरी स्तंभों के गटरों को "खींचता है", जबकि एक ही समय में इसे व्यापक बनाता है।

.rowDiv वास्तव में ग्रिड कॉलम के अलावा अन्य कुछ भी पकड़ करने के लिए कभी नहीं किया जाना चाहिए। यदि यह है, तो आप किसी भी कॉलम के सापेक्ष सामग्री को स्थानांतरित कर देंगे, जैसा कि आपके फिडल में स्पष्ट है।

अपडेट करें:

आपने मेरे उत्तर के बाद अपने प्रश्न को संशोधित किया है, इसलिए यहां उस प्रश्न का उत्तर दिया गया है जिसे आप अब पूछ रहे हैं: .containerकक्षा को पहले से जोड़ें <div>। काम का उदाहरण देखें ।

— सीन रयान
स्रोत

2

ग्रिड कॉलम गद्दी, नहीं मार्जिन (BS3 में) से अलग कर रहे हैं

— भटकते हुए

3

महान! यह सभी अतिप्रवाह सामग्री की व्याख्या करता है।

— रुटविक गंगुरडे

27

3.3.7 बूटस्ट्रैप के साथ .container-fluid के साथ .row को लपेटते हुए इस समस्या को हल किया जाता है।

— dbarma
स्रोत

इसने मेरे लिए काम किया, भले ही शुरू में मुझे लगा कि यह नहीं हुआ है, ऐसा इसलिए है क्योंकि मेरे पास डेवलपर का वेब कंसोल खुला था जो चौड़ाई को कम करता है, लेकिन जाहिर है यह गड़बड़ भी करता है। .container-fluidयहाँ भी प्रयोग करने का सुझाव दिया गया था: stackoverflow.com/a/23616447/5272567

— माथियास

काम करता है, भी, जब लपेटकर स्थिति की है absolute। संकेत के लिए धन्यवाद

— InsOp

अगर मैं इस उत्तर को कई बार वोट कर सकता हूं ... :)

— rony36

बूटस्ट्रैप 4 के लिए एक ही तय।

— रोब एल

19

इसी तरह की पोस्ट के नीचे मेरा जवाब देखें।

बूटस्ट्रैप .row में -30px का डिफॉल्ट मार्जिन-लेफ्ट क्यों होता है?

आप मूल रूप से "पंक्ति" के बजाय "स्पष्ट" का उपयोग करते हैं। यह नकारात्मक मार्जिन को छोड़कर "पंक्ति" के समान सटीक करता है।

— केली
स्रोत

2

वे कक्षाएं दो अलग-अलग चीजें करते हैं, हालांकि वे नेत्रहीन रूप से ऐसा कर सकते हैं। स्पष्ट रूप से उत्तरदायी स्थितियों में लचीला नहीं है और ग्रिड के साथ .row का व्यवहार सही है।

— टोड बाउर

यह आवरण के बाहर की सामग्री को ओवरफ्लो करता है।

— भोजेंद्र रौनियार

लेकिन बेहतर तरीका कंटेनर के साथ पंक्ति को लपेटना है।

— भोजेंद्र रौनियार

सबसे अच्छा ASWER! यूपी!

— एंडरसन ब्रेसने

18

मैंने कंटेनर वर्ग के अंदर पंक्ति वर्ग का उपयोग किया और अभी भी कुछ समस्या थी। जब मैंने कक्षा में जोड़ा margin-left: auto; margin-right: auto;तो .rowयह ठीक काम किया।

— जेफरी
स्रोत

8

इसने एकदम जादू की तरह काम किया! बूटस्ट्रैप 4 में 'एमएक्स-ऑटो' वर्ग को जोड़ना मेरे लिए अतिप्रवाह मुद्दा तय किया।

— मिशेल एम।

3

@ मिचेल एम को इस उत्तर के लिए पूरा क्रेडिट मिलना चाहिए।
उसने एक टिप्पणी में कहा:

बूटस्ट्रैप 4 में 'एमएक्स-ऑटो' वर्ग को जोड़ना मेरे लिए अतिप्रवाह मुद्दा तय किया।

आपको अपना पहला divएलिमेंट जैसे अपडेट करना होगा :

<div class="row mx-auto" style="background:#000000">

सभी नेस्टेड-रो के लिए ऐसा करने की आवश्यकता नहीं है (यदि आपके पास है)। वर्टिकल-स्क्रॉलबार से बचने के लिए
बस mx-autoसबसे बाहरी row(या पंक्तियों) में जोड़ें ।
मार्जिन को बदलने के लिए "पंक्ति" वर्ग जोड़कर सभी बूटस्ट्रैप पंक्तियों के व्यवहार को ओवरराइड न करें।

— MikeTeeVee
स्रोत

1

किसी भी भविष्य के डेवलपर्स के लिए इस समस्या को डीबग करना:

बूटस्ट्रैप पंक्ति स्तंभों के लिए पैडिंग सेट करता है, इसलिए पंक्ति की कोई भी सामग्री कंटेनर के बाहर दिखाई नहीं देनी चाहिए। यदि आप यह अनुभव कर रहे हैं और आप colst -... classes का उपयोग करके बूटस्ट्रैप के ग्रिड सिस्टम का सही उपयोग कर रहे हैं, तो संभव है कि आपके पास अतिरिक्त CSS कहीं स्तंभों पर पैडिंग रीसेट कर रहा हो।

— JSideris
स्रोत

या, आपके पास बूटस्ट्रैप का पुराना संस्करण है। उदाहरण के लिए, 3.0.0 VS2015 के साथ वितरित किया गया। देखिए github.com/twbs/bootstrap/issues/8959

— एडवेंचर