कंटेनर-द्रव बनाम .कंटेनर

Question

सिर्फ 3.1 डाउनलोड किया और डॉक्स में पाया ...

एक पूर्ण-चौड़ाई लेआउट में अपने सबसे बाहरी बदलकर किसी भी निश्चित-चौड़ाई ग्रिड लेआउट चालू .containerकरने के लिए .container-fluid।

अंदर देखने पर bootstrap.cssऐसा प्रतीत होता है कि .container-fluidयह समान है .container। दोनों में समान सीएसएस है, और हर उदाहरण के .container-fluidसाथ जोड़ा गया है .container, और सभी कॉलम कक्षाएं प्रतिशत में निर्दिष्ट हैं।

जब मैं उदाहरणों के साथ घूमता हूं तो मुझे कोई अंतर नहीं दिख रहा था, क्योंकि सब कुछ तरल लग रहा था।

जैसा कि मैं बूटस्ट्रैप के लिए नया हूं, मुझे लगता है कि मुझे कुछ याद आ रहा है। क्या कोई एक मिनट ले सकता है और मुझे बता सकता है?

Comments

मैंने देखा कि एक। इसे कुछ रिव्यू वापस पोस्ट किया गया था। कंटेनर-तरल पदार्थ 3.0 के लिए बाहर ले जाया गया, और 3.1 के लिए वापस जोड़ा गया।

— फैटफिंगर

@ रणवीर निश्चित रूप से एक डुप्लिकेट नहीं है क्योंकि यह बीएस 2 यानी बीएस 2.3 को संदर्भित करता है - क्योंकि यह प्रश्न उत्तर नहीं देता है आप भविष्य के उपयोगकर्ताओं को भ्रमित न करने के लिए हटा सकते हैं

— पीडब्लू कड

डॉक्स से द्रव पूरे व्यूपोर्ट की चौड़ाई को कवर करता है। (या पूरे वर्तमान कंटेनर या तत्व से युक्त है?) किसी भी मामले में, नाम द्रव क्यों? गैर-तरल कंटेनर के विपरीत द्रव क्या है?

— पश्त्यूट

Answer 1

त्वरित संस्करण: .container बूटस्ट्रैप में प्रत्येक स्क्रीन आकार के लिए एक निश्चित चौड़ाई है (xs, sm, md, lg); .container-fluidउपलब्ध चौड़ाई को भरने के लिए फैलता है।

---

के बीच का अंतर containerऔर container-fluidसीएसएस के इन पंक्तियों से आता है:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

वेबपेज पर देखे जा रहे व्यूपोर्ट की चौड़ाई के आधार पर, containerक्लास अपनी डिव को एक निश्चित निश्चित चौड़ाई देती है। ये लाइनें किसी भी रूप में मौजूद नहीं हैं container-fluid, इसलिए इसकी चौड़ाई हर बार व्यूपोर्ट की चौड़ाई बदलती है।

उदाहरण के लिए, मान लें कि आपकी ब्राउज़र विंडो 1000px चौड़ी है। चूंकि यह 992px की न्यूनतम-चौड़ाई से अधिक है, इसलिए आपके .containerतत्व की चौड़ाई 970px होगी। फिर आप धीरे-धीरे अपनी ब्राउज़र विंडो को चौड़ा करते हैं। .container1200px मिलने तक आपकी चौड़ाई नहीं बदलेगी, जिस पर वह 1170px चौड़ी हो जाएगी और किसी भी बड़े आकार की चौड़ाई के लिए उस तरह से रहेगी।

.container-fluidदूसरी ओर आपका तत्व, लगातार आकार बदलता रहेगा क्योंकि आप अपने ब्राउज़र की चौड़ाई में सबसे छोटे बदलाव करते हैं।

Comments

@jkillian का मतलब है कि अगर मैं पूरी चौड़ाई लेआउट का निर्माण करना चाहते हैं, मैं का उपयोग करना चाहिए .container-fluidऔर .containerबॉक्स्ड चौड़ाई के लिए, यह सही है?

— त्रिशंकु पीडी

@ Theung पूरी तरह से आपके द्वारा 'पूर्ण चौड़ाई' से अभिप्राय है, लेकिन container-fluidमैं आपके मामले में जहाँ तक मैं बता सकता हूं

— Jillillian

@JKillian आजकल कई थीम के रूप में, उनके पास हमेशा 2 लेआउट होते हैं: बॉक्सिंग और चौड़ा लेआउट। आशा है कि आप समझ सकते हैं कि मैं क्या समझा रहा हूँ। त्रुटिपूर्ण अंग्रेजी के लिए माफ करें।

— त्रिशंकु पीडी

@ जेकिलियन कुछ मामलों में .container और .container-fluid का उपयोग कैसे करते हैं? Ex .: ( design.davidrozando.com/drew-html-v1.1/… )।

— ब्राइटवेब

@ जेकिलियन तो कंटेनर-तरल पदार्थ की भी आवश्यकता क्यों है?

Answer 2

मुझे लगता है कि आप कह रहे हैं कि एक containerबनाम container-fluidग्रिड के प्रति उत्तरदायी और गैर-उत्तरदायी के बीच अंतर है। यह सच नहीं है ... क्या कह रहा है कि चौड़ाई तय नहीं है ... इसकी पूरी चौड़ाई!

यह व्याख्या करना कठिन है इसलिए उदाहरणों को देखें

---

उदाहरण एक

container-fluid:

http://www.bootply.com/119981

तो आप देखते हैं कि कंटेनर पूरे स्क्रीन को कैसे लेता है ... यह एक है container-fluid।

अब दूसरे को सामान्य रूप से देखें containerऔर पूर्वावलोकन के किनारों को देखें

उदाहरण दो

container

http://www.bootply.com/119982

अब आप उदाहरण में सफेद स्थान देखते हैं? ऐसा इसलिए है क्योंकि इसकी एक निश्चित चौड़ाई है container! यह दो अलग-अलग टैब में दोनों उदाहरणों को खोलने और आगे और पीछे स्विच करने के लिए और अधिक समझ में आ सकता है।

संपादित करें

बेहतर अभी तक यहाँ दोनों कंटेनरों के साथ एक उदाहरण है! अब आप वास्तव में अंतर बता सकते हैं!

http://www.bootply.com/119983

मुझे आशा है कि इसने थोड़ा स्पष्ट करने में मदद की!

Comments

दोनों प्रकार के कंटेनरों के साथ उदाहरण में आइटम होते हैं जो दोनों चौड़ाई बदलते हैं।

— अहानिबेकाड

यह जानते हुए भी कि अंतर क्या है, मुझे छायांकन के कारण "दोनों" उदाहरण भ्रामक लगे। मैंने कुछ के लिए आपका स्पष्ट उदाहरण बनाने के लिए आपके कोड को forked किया: bootply.com/119983 (इसके अलावा, .row-fluid में बूटस्ट्रैप 3. की ​​आवश्यकता नहीं है। बस आपके कंटेनर में तरल पदार्थ है या नहीं ।row का उपयोग करें।)

— कार्ल बुसेमा

कार्ल, आपका लिंक मूल के समान उदाहरण पर जाता है। यदि आपके पास अभी भी अपना कांटा संस्करण है, तो क्या आप लिंक पोस्ट कर सकते हैं?

— माइक टी।

यहाँ एक अच्छा कांटा उदाहरण लिंक है , अगर भविष्य में कोई और इसमें भाग लेता है।

— माइक कोलिन्स

धन्यवाद माइक दूसरे उदाहरण वे मेरे ब्राउज़र पर एक ही देखा।

— eric

Answer 3

दोनों .containerऔर .container-fluidउत्तरदायी (यानी वे स्क्रीन चौड़ाई के आधार पर लेआउट बदलने), लेकिन अलग अलग तरीकों से कर रहे हैं (मुझे पता है, नामकरण इसे उस तरह से आवाज नहीं है)।

संक्षिप्त जवाब:

.container उछल / काटकर आकार बदलने वाला है, और

.container-fluid चौड़ाई में निरंतर / ठीक आकार है: 100%

एक कार्यक्षमता के नजरिए से:

.container-fluidजैसे ही आप किसी भी राशि से अपनी विंडो / ब्राउज़र की चौड़ाई बदलते हैं, .containerवैसे ही इसके विपरीत कोई अतिरिक्त खाली जगह नहीं छोड़ता है। (इसलिए नामकरण: "डिजिटल" के विपरीत "द्रव", "असतत", "घुटा हुआ", या "परिमाणित")।

.containerकई निश्चित चौड़ाई में विखंडू में आकार बदलता है। दूसरे शब्दों में, यह अलग-अलग विशिष्ट उर्फ ​​"निश्चित" चौड़ाई स्क्रीन चौड़ाई के विभिन्न प्रकार होंगे।

शब्दार्थ: "निश्चित चौड़ाई"

आप देख सकते हैं कि नामकरण भ्रम कैसे पैदा हो सकता है। तकनीकी रूप से, हम कह सकते हैं .containerकि "निश्चित चौड़ाई" है, लेकिन यह केवल इस अर्थ में तय किया गया है कि यह प्रत्येक दानेदार चौड़ाई पर आकार नहीं देता है। यह वास्तव में "निश्चित" नहीं है इस अर्थ में कि यह हमेशा एक विशिष्ट पिक्सेल चौड़ाई पर रहता है, क्योंकि यह वास्तव में आकार बदल सकता है।

मौलिक दृष्टिकोण से:

.container-fluidCSS प्रॉपर्टी है width: 100%;, इसलिए यह हर स्क्रीन की चौड़ाई ग्रैन्युलैरिटी पर लगातार रीड करता है।

.container-fluid {
  width: 100%;
}

.container"चौड़ाई = 800px" (या उन्हें, रीम आदि) की तरह कुछ है, विभिन्न स्क्रीन चौड़ाई पर एक विशिष्ट पिक्सेल चौड़ाई मान है। यह निश्चित रूप से है कि जब स्क्रीन चौड़ाई एक स्क्रीन चौड़ाई सीमा पार करती है तो तत्व चौड़ाई अचानक अलग चौड़ाई में कूद जाती है। और उस सीमा को CSS3 मीडिया प्रश्नों द्वारा नियंत्रित किया जाता है, जो आपको अलग-अलग स्थितियों के लिए अलग-अलग शैलियों को लागू करने की अनुमति देता है, जैसे कि स्क्रीन चौड़ाई पर्वतमाला।

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

परे

आप मीडिया के प्रश्नों के माध्यम से किसी भी निश्चित चौड़ाई के तत्वों को उत्तरदायी बना सकते हैं, न कि .containerतत्वों को, क्योंकि मीडिया के प्रश्न वास्तव .containerमें पृष्ठभूमि में बूटस्ट्रैप द्वारा कैसे कार्यान्वित किए जाते हैं (कोड के लिए JKillian का उत्तर देखें)।

Comments

.containerउत्तरदायी के विपरीत अनुकूली के लिए अधिक सटीक व्यवहार नहीं है ?

— अजय

@ अजय तुम एक अच्छी बात उठाते हो। नित्य बनाम बनाम उछलते हुए आकार को अलग करने के लिए शब्द उपयोगी होगा।

— अहानजकद

@ayjay Adaptive क्लाइंट के प्रकार का पता लगाता है, और सर्वर-साइड चीजों को प्रस्तुत करता है। उत्तरदायी को इस बात की परवाह नहीं है कि क्लाइंट किस प्रकार का डिवाइस है; यह केवल चौड़ाई के बारे में परवाह करता है (मीडिया प्रश्नों के कारण)। जैसे, उत्तरदायी क्लाइंट-साइड (सीएसएस, जावास्क्रिप्ट) प्रदान किया गया है। देखें huffingtonpost.com/garrett-goodman/… और amberweinberg.com/is-it-adaptive-or-responsive-web-design IMO उत्तरदायी विभिन्न उपकरणों के लिए आपकी साइट के पूरी तरह से अलग संस्करण रखने की तुलना में बनाए रखना और बनाना बहुत आसान है। लेकिन आपके सीएसएस को सभी ब्राउज़रों का हिसाब देना होगा।

— अहानजकद

अनुकूली बनाम उत्तरदायी के इस अर्थपूर्ण प्रश्न पर @ajay Revisitingng ... चूंकि एडाप्टिव का अर्थ है कि यह डिवाइस का पता लगा रहा है, और तदनुसार अलग HTML / css / js बाहर थूक रहा है ... यह बोधगम्य है कि html / css / js में css शैली हो सकती है चौड़ाई की: 100%; और यह हर डिवाइस के लिए हो सकता है। इस तरह के मामले में, यह सब अनुकूली है, लेकिन फिर भी यह

— चंक्स में अचानक बढ़ने के

Answer 4

.container-fluidजब आप अपने पृष्ठ को उसके व्यूपोर्ट आकार में हर छोटे अंतर के साथ आकार देना चाहते हैं, का उपयोग करें ।

का प्रयोग करें .containerजब आप करने के लिए अपने पृष्ठ चाहते हैं आकार के केवल 4 प्रकार के shapeshift जो भी रूप में जाना जाता है, "breakpoints"।

उनके आकार के अनुरूप विराम बिंदु हैं:

• अतिरिक्त छोटा: (केवल मोबाइल रिज़ॉल्यूशन)
• छोटा: 768px (गोलियाँ)
• माध्यम: 992px (लैपटॉप)
• बड़ा: 1200px (लैपटॉप / डेस्कटॉप)

Answer 5

अपडेटेड 2019

मूल अंतर यह है कि containerतराजू जिम्मेदारी से है, जबकि container-fluidहमेशा है width:100%। इसलिए रूट सीएसएस परिभाषाओं में, वे समान दिखाई देते हैं, लेकिन यदि आप आगे देखते हैं तो आप देखेंगे कि .containerमीडिया प्रश्नों से बंधा हुआ है।

बूटस्ट्रैप ४

container5 चौड़ाई है ...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

बूटस्ट्रैप ३

इसके container4 आकार हैं। xsस्क्रीन पर पूर्ण चौड़ाई , और फिर यह चौड़ाई निम्न मीडिया प्रश्नों के आधार पर भिन्न होती है ..

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

कंटेनर बनाम कंटेनर-तरल पदार्थ डेमो

Comments

इसका सवाल से कोई लेना-देना नहीं है। अच्छी जानकारी लेकिन यहाँ प्रासंगिक नहीं है।

— बेनिस जू

Zim वह पूछ रहा था क्या बीच का अंतर था .container-fluidऔर .container। यह वह जानकारी थी जिसकी मुझे तलाश थी। आपकी जानकारी दिलचस्प है, लेकिन जब मैं जवाब की तलाश में आया तो वास्तव में एक-दो मिनट के लिए मुझसे अलग हो गए। यदि यह उन उत्तरों को सूचीबद्ध करता है जो इस सवाल का जवाब देते हैं जो बहुत अच्छा होगा लेकिन एसओ हमें अपने स्वयं के आदेश का सुझाव नहीं देता है। और मेरी मूल टिप्पणी को पढ़ना मैं उतना स्पष्ट नहीं था जितना कि मैं हो सकता था। Anyhoo जानकारी के लिए धन्यवाद।

— बेनिस जू

संक्षेप में, .containerमीडिया के प्रश्नों के अनुसार .container-fluidचौड़ाई में परिवर्तन और वास्तविक समय में चौड़ाई में परिवर्तन (व्यू-पोर्ट चौड़ाई के अनुसार)

— हसन तारेक

Answer 6

.containerअधिकतम चौड़ाई पिक्सेल मान है, जबकि .container-fluidअधिकतम-चौड़ाई 100% है।

.container-fluid जैसे ही आप किसी भी राशि से अपनी विंडो / ब्राउज़र की चौड़ाई बदलते हैं, लगातार आकार बदलता रहता है।

.container मीडिया के प्रश्नों द्वारा नियंत्रित कई निश्चित चौड़ाई में आकार में परिवर्तन होता है, (तकनीकी रूप से हम कह सकते हैं कि यह "निश्चित चौड़ाई" है क्योंकि पिक्सेल मान निर्दिष्ट हैं, लेकिन यदि आप वहां रुकते हैं, तो लोगों को यह आभास हो सकता है कि यह आकार नहीं बदल सकता है - अर्थात उत्तरदायी नहीं ।)

Comments

समग्र कंटेनर-द्रव की तरह लगता है बेहतर है? मोबाइल फोन के लिए अधिक उत्तरदायी जो इन दिनों एक बड़ी बात है ...

Answer 7

डिस्प्ले के नजरिए .containerसे आप उपयोगकर्ताओं को जो देख रहे हैं, उस पर अधिक नियंत्रण देता है, और यह देखना आसान बनाता है कि उपयोगकर्ता क्या देखेंगे क्योंकि आपके पास प्रदर्शन के केवल 4 रूप हैं (बूटस्ट्रैप 5 के मामले में 5) क्योंकि आकार संबंधित हैं ग्रिड आकार के समान। जैसे .col-xs, .col-sm, .col, और .col-lg।

इसका मतलब यह है, कि जब आप उपयोगकर्ता परीक्षण कर रहे हैं यदि आप 4 अलग-अलग आकारों के डिस्प्ले पर परीक्षण करते हैं, तो आप सभी वेरिएशन को डिस्प्ले में देखते हैं।

उपयोग करते समय .container-fluidक्योंकि witdh व्यूपोर्ट चौड़ाई से संबंधित है प्रदर्शन गतिशील है, इसलिए संस्करण बहुत अधिक हैं और बहुत बड़ी स्क्रीन या असामान्य स्क्रीन चौड़ाई वाले उपयोगकर्ता वे परिणाम देख सकते हैं जिनकी आप अपेक्षा नहीं कर रहे थे।

Answer 8

आप 3.1 में सही हैं। कंटेनर-द्रव और .कंटेनर समान हैं और कंटेनर की तरह काम करते हैं लेकिन यदि आप उन्हें हटाते हैं तो यह काम करता है। कंटेनर-तरल पदार्थ (पूरी चौड़ाई)। उन्होंने "मोबाइल फर्स्ट एप्रोच" के लिए .container-fluid को हटा दिया था, लेकिन अब यह 3.3.4 में वापस आ गया है (और वे अलग तरीके से काम करेंगे)

नवीनतम बूटस्ट्रैप प्राप्त करने के लिए कृपया इस पोस्ट को स्टैकओवरफ़्लो पर पढ़ें इससे इसे देखने में मदद मिलेगी ।