बूटस्ट्रैप तत्व 100% चौड़ाई

Question 1

मैं बारी-बारी से 100% रंगीन ब्लॉक बनाना चाहता हूं। एक "आदर्श" स्थिति को एक लगाव के साथ-साथ वर्तमान स्थिति के रूप में चित्रित किया जाता है।

वांछित सेटअप:

वर्तमान में:

मेरा पहला विचार एक दिव्यांग वर्ग बनाना था, इसे एक पृष्ठभूमि रंग देना था, और इसे 100% चौड़ाई देना था।

.block {
    width: 100%;
    background: #fff;
}

हालाँकि, आप देख सकते हैं कि यह स्पष्ट रूप से काम नहीं करता है। यह एक कंटेनर क्षेत्र तक ही सीमित है। मैंने कंटेनर को बंद करने की कोशिश की और वह भी काम नहीं किया।

Question 2

containerवर्ग जानबूझकर 100% चौड़ाई नहीं है। यह व्यूपोर्ट की चौड़ाई के आधार पर अलग-अलग निश्चित चौड़ाई है।

यदि आप स्क्रीन की पूरी चौड़ाई के साथ काम करना चाहते हैं, तो उपयोग करें .container-fluid:

बूटस्ट्रैप 3:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

बूटस्ट्रैप 2:

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>

Question 3

इस प्रकार आप बूटस्ट्रैप 3 के साथ अपना इच्छित सेटअप प्राप्त कर सकते हैं :

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

container-fluidहिस्सा सुनिश्चित करें कि आप पूरी चौड़ाई से अधिक पृष्ठभूमि को बदल सकते हैं बनाता है। containerहिस्सा सुनिश्चित करें कि आपकी सामग्री अभी भी एक निश्चित चौड़ाई में लपेटा जाता है बनाता है।

यह दृष्टिकोण काम करता है, लेकिन व्यक्तिगत रूप से मुझे सभी घोंसले पसंद नहीं हैं। हालाँकि, मुझे अब तक कोई बेहतर समाधान नहीं मिला है।

Question 4

शीघ्र जवाब

कई नॉटेड .container एस का उपयोग करें
उन लोगों को लपेटें जिन्हें .containerआप पूर्ण-चौड़ाई की पृष्ठभूमि में रखना चाहते हैंdiv
रैपिंग डिव में सीएसएस बैकग्राउंड जोड़ें

Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , कंटेनर बॉर्डर: https://jsfiddle.net/vLhc35k4/1/
HTML:

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

सीएसएस: .specialBackground{ background-color: gold; /*replace with own background settings*/ }

आगे की जानकारी

इसका उपयोग न करें

बहुत से लोग ( गलत तरीके से ) सुझाव देंगे , कि आपको नेस्टेड कंटेनरों का उपयोग करना चाहिए।
ठीक है, तुम नहीं करना चाहिए ।
वे नेस्टेड होने के लिए मानसिक नहीं हैं। ( डॉक्स में " कंटेनर " अनुभाग देखें )

यह काम किस प्रकार करता है

divएक ब्लॉक तत्व है, जो डिफ़ॉल्ट रूप से किसी डॉक्यूमेंट बॉडी की पूरी चौड़ाई तक होता है - इसमें फुल-चौड़ाई फीचर होता है। इसकी सामग्री की ऊंचाई भी है (यदि आप अन्यथा निर्दिष्ट नहीं करते हैं)।

बूटस्ट्रैप कंटेनरों को एक शरीर के प्रत्यक्ष बच्चे होने की आवश्यकता नहीं है, वे बस कुछ पैडिंग वाले कंटेनर हैं और संभवतः कुछ स्क्रीन-चौड़ाई-चर निश्चित चौड़ाई हैं।

यदि एक बेसिक ग्रिड .containerमें कुछ निश्चित चौड़ाई है तो यह क्षैतिज रूप से ऑटो-केंद्रित भी है।
इसलिए इसमें कोई अंतर नहीं है कि क्या आप इसे एक:

एक शरीर का सीधा बच्चा
एक मूल div का प्रत्यक्ष बच्चा जो एक शरीर का प्रत्यक्ष बच्चा है।

"बेसिक" से divमेरा मतलब है divकि सीएसएस में अपनी सीमा, पैडिंग, आयाम, स्थिति या सामग्री का आकार बदलना नहीं है। display: block;सीएसएस और संभवतः पृष्ठभूमि के साथ वास्तव में सिर्फ एक HTML तत्व ।
लेकिन निश्चित रूप से वर्टिकल जैसे सीएसएस (ऊंचाई, पैडिंग-टॉप, ...) को बूटस्ट्रैप ग्रिड को तोड़ना नहीं चाहिए :-)

बूटस्ट्रैप स्वयं उसी दृष्टिकोण का उपयोग कर रहा है

... ऑल ओवर इट्स इट्स ओन वेबसाइट एंड इट्स "जेमबॉट्रोन" उदाहरण:
http://getbootstrap.com/examples/jjotot/

Question 5

Vw का उपयोग करके एक वर्कअराउंड है। उपयोगी है जब आप एक नया द्रव कंटेनर नहीं बना सकते हैं। यह, एक क्लासिक 'कंटेनर' डिव के अंदर पूर्ण आकार का होगा।

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

इसके बाद साइडबार की समस्या है (@Typhlosaurus का धन्यवाद), इस js फ़ंक्शन के साथ हल किया गया, इसे दस्तावेज़ लोड पर कॉल किया गया और आकार बदल दिया गया:

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}

Question 6

बूटस्ट्रैप 4 में, आप 'w-100' वर्ग (w चौड़ाई के रूप में, और 100 100% के रूप में) का उपयोग कर सकते हैं

आप यहाँ प्रलेखन पा सकते हैं: https://getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

यदि आप HTML लेआउट नहीं बदल सकते हैं:

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

डेमो: http://www.bootply.com/tVkNyWJxA6

Question 8

के बजाय

style="width:100%"

प्रयोग करके देखें

class="col-xs-12"

यह आपको 1 वर्ण बचाएगा :)

Question 9

कभी-कभी सामग्री कंटेनर को बंद करना संभव नहीं होता है। हम जिस समाधान का उपयोग कर रहे हैं वह थोड़ा अलग है लेकिन फ़ायरफ़ॉक्स स्क्रॉलबार के आकार के कारण एक अतिप्रवाह को रोकना है!

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

यहाँ एक उदाहरण है: https://jsfiddle.net/RubbelDeKatz/wvt9253q

Question 10

क्षमा करें, आपके सीएसएस के लिए भी पूछना चाहिए था। जैसा कि, मूल रूप से आपको जो देखने की जरूरत है, वह आपके कंटेनर को स्टाइल .container { width: 100%; }को आपके सीएसएस में दे रहा है और फिर संलग्न div यह तब तक विरासत में मिलेगा जब तक आप उन्हें अपनी खुद की चौड़ाई नहीं देते। आपको कुछ क्लोजिंग टैग भी याद आ रहे थे, और </center>एक <center>बिना बंद हुए यह कभी भी खुला नहीं रहा, कम से कम कोड के इस भाग में। मुझे यकीन नहीं था कि अगर आप उसी डीवा में छवि चाहते हैं जिसमें आपकी सामग्री या अलग है, तो मैंने दो उदाहरण बनाए। मैंने img की चौड़ाई केवल 100px में बदल दी क्योंकि jsfiddle एक छोटा सा देखने का क्षेत्र प्रदान करता है। मुझे पता है अगर यह नहीं है जो आप के लिए देख रहे हैं।

सामग्री और छवि अलग: http://jsfiddle.net/QvqKS/2/

एक ही div में सामग्री और छवि (img बाईं ओर तैरती है): http://jsfiddle.net/QvqKS/3/

Question 11

मुझे आश्चर्य है कि क्यों किसी को चाहते हैं, "ओवरराइड" कंटेनर चौड़ाई की कोशिश करेंगे के बाद से अपने उद्देश्य है कुछ गद्दी के साथ अपनी सामग्री रखने के लिए, लेकिन मैं एक ऐसी ही स्थिति थी (यही कारण है कि मैं अपने समाधान साझा करना चाहते थे, भले ही वहाँ हो जवाब के )।

मेरी स्थिति में, मैं चाहता था कि सभी सामग्री (सभी पृष्ठों की) एक कंटेनर के अंदर प्रदान की जाए, इसलिए यह मेरे _Loutout.cshtml से कोड का टुकड़ा था:

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

मेरे होम इंडेक्स पेज में, मेरे पास एक बैकग्राउंड हेडर इमेज थी, जिसे मैं पूरी स्क्रीन की चौड़ाई में भरना चाहता हूं , इसलिए इसका समाधान इंडेक्स.शर्टलएम को इस तरह बनाना था:

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

मुझे लगता है कि यह वर्कअराउंड बनाने की कोशिश करने से बेहतर है, क्योंकि अनुभाग लेआउट में कुछ सामग्री को गतिशील रूप से प्रतिस्थापित करने की अनुमति (या मजबूर) के उद्देश्य से किए गए हैं।

Question 12

हालांकि लोगों ने उल्लेख किया है कि आपको इस मामले में .container-fluid का उपयोग करने की आवश्यकता होगी लेकिन आपको बूटस्ट्रैप से पेडिंग को भी हटाना होगा।

Question 13

निम्नलिखित उत्तर किसी भी उपाय से बिल्कुल इष्टतम नहीं है, लेकिन मुझे कुछ ऐसा चाहिए जो कंटेनर के भीतर अपनी स्थिति को बनाए रखता है जबकि यह आंतरिक रूप से पूरी तरह से फैला हुआ है।

https://jsfiddle.net/fah5axm5/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});

Question 14

मैं नीचे के रूप में दो अलग 'कंटेनर' div का उपयोग करेगा:

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

यह ध्यान में रखें कि कंटेनर-द्रव आपके ब्रेकप्वाइंट का पालन नहीं करता है और यह पूर्ण चौड़ाई वाला कंटेनर है।