100% चौड़ाई ट्विटर बूटस्ट्रैप 3 टेम्पलेट

134

मैं बूटस्ट्रैप नौसिखिया हूं और मेरे पास 100% चौड़ा टेम्पलेट है जिसे मैं बूटस्ट्रैप के साथ कोड करना चाहता हूं। पहला कॉलम बाएं कोने से शुरू होता है और मेरे पास एक Google मैप है जो सबसे दाहिने ओर फैला है। मैंने सोचा कि मैं इसे container-fluidकक्षा के साथ कर सकता हूं , लेकिन यह अब उपलब्ध नहीं लगता है। मुझे पता नहीं है कि बूटस्ट्रैप 3 के साथ उस लेआउट को कैसे प्राप्त किया जाए। मैं थीमफॉरेस्ट से ज्यामिति PSD टेम्पलेट का उपयोग कर रहा हूं, यदि आप लेआउट देखना चाहते हैं तो यहां लिंक: http://themeforest.net/item/geometry-design-for- जियोलोकेशन-सामाजिक-networkr / 4752268

— सामिया रूपांती
स्रोत

5

आप @container-*100% के रूप में चौड़ाई का उपयोग करने के लिए बूटस्ट्रैप को अनुकूलित कर सकते हैं । इसके अलावा, .container-fluid3.1.0 में वापस आ रहा है। :)

247

बूटस्ट्रैप 3 के लिए, आपको एक कस्टम आवरण का उपयोग करना होगा और इसकी चौड़ाई 100% निर्धारित करनी होगी।

.container-full {
  margin: 0 auto;
  width: 100%;
}

यहाँ Bootply पर एक कार्यशील उदाहरण दिया गया है

यदि आप एक कस्टम क्लास नहीं जोड़ना चाहते हैं, तो आप एक col-lg-12( वाइड लेआउट डेमो ) के अंदर सब कुछ लपेटकर एक बहुत व्यापक लेआउट (100% नहीं) को प्राप्त कर सकते हैं

बूटस्ट्रैप 3.1 के लिए अद्यतन

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

बूटस्ट्रैप 3.1 डेमो

— Zim
स्रोत

13

तुम्हे सावधान रहना चाहिये। पंक्ति में एक -15px मार्जिन बाएँ और दाएँ है। उस कंटेनर द्वारा मुआवजा दिया जाता है जिसमें 15px पैडिंग है। सबसे अच्छा तरीका यह है कि आप अपने कंटेनर में उस पैडिंग को जोड़ दें और फिर अपनी ग्रिड बनाने के लिए पंक्तियों और बछड़ों का उपयोग करें।

— रूटमैन

6

@rootman मैं क्लास = "कंटेनर कंटेनर-फुल" का उपयोग कर रहा हूं और यह काम करने लगता है।

— केनमोर

पूर्ण आकार की पंक्ति प्राप्त करने के लिए कोल-एमडी -12 के साथ कंटेनर-तरल पदार्थ का उपयोग करें। एक नाली (प्रत्येक पक्ष पर मानक 15 पीएक्स) होगा जिसे हटाने की आवश्यकता है। सबसे आसान तरीका यह है कि निम्नलिखित कस्टम सीएसएस का उपयोग करके इसे मैन्युअल रूप से हटा दिया जाए: #SomeId div {padding-left: 0; गद्दी-सही: 0; }

— मार्टिन

2

टिप के लिए धन्यवाद ... कंटेनर-तरल पदार्थ ने मेरे लिए अच्छा काम किया, किसी अन्य परिवर्तन की आवश्यकता नहीं है। गटर ने कोई समस्या पेश नहीं की क्योंकि निहित वर्ग की पृष्ठभूमि-रंग की स्थापना ने किनारों को रंग प्रदान किया, जैसा कि वांछित है, जबकि पाठ और अन्य तत्व अच्छी तरह से थोड़ा ऑफसेट थे, वांछित भी।

— कृष्ण गुप्त

30

यह बूटस्ट्रैप v3.0.0 में 100% चौड़ाई लेआउट के लिए पूर्ण मूल संरचना है । आपको अपने वर्ग के साथ नहीं लपेटना चाहिए । कारण वर्ग बहुत मार्जिन लेगा और यह आपको पूर्ण स्क्रीन (100% चौड़ाई) लेआउट प्रदान नहीं करेगा जहां बूटस्ट्रैप ने अपने मोबाइल-प्रथम संस्करण v3.0.0 से कंटेनर-द्रव वर्ग को हटा दिया है ।<div class="row">containercontainer

तो बस <div class="row">कंटेनर वर्ग के बिना लिखना शुरू करें और आप 100% चौड़ाई के लेआउट के साथ जाने के लिए तैयार हैं।

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

अपने आप से परिणाम देखने के लिए मैंने एक बूटप्ले बनाया है। वहां का लाइव आउटपुट देखें। http://bootply.com/82136 और पूर्ण बुनियादी बूटस्ट्रैप 3 100% चौड़ाई लेआउट मैंने एक जिस्ट बनाया है। आप इसका उपयोग कर सकते हैं। यहां से जिरह करवाएं

अगर आपको और अधिक सहायता की आवश्यकता हो तो मुझे उत्तर दें। धन्यवाद।

— शहरिया आज़म
स्रोत

20

यह समाधान .row पर मार्जिन के कारण FF में एक क्षैतिज स्क्रॉलबार जोड़ता है। बूटस्ट्रैप डॉक्स का कहना है कि .row को हमेशा एक कंटेनर के अंदर इस्तेमाल किया जाना चाहिए क्योंकि - फॉक्स पूरी तरह से तरल लेआउट बनाने के लिए देख रहे हैं (जिसका अर्थ है कि आपकी साइट व्यूपोर्ट की पूरी चौड़ाई को फैलाती है) को पैडिंग के साथ एक युक्त तत्व में अपनी ग्रिड सामग्री को लपेटना होगा: 0 15px; मार्जिन ऑफसेट करने के लिए: 0 -15px; पर प्रयोग किया जाता है। - getbootstrap.com/css/#grid-intro

— nealio82

5

नीलियो सही है। आपको अभी भी एक कंटेनर का उपयोग करना चाहिए। मैं अपनी पूर्ण-चौड़ाई वाली पंक्तियों को इस CSS घोषणा के साथ .container-full में .container-full { padding: 0 15px; }

— लपेटता हूं

3

यह बूटस्ट्रैप में एक बग प्रतीत होता है। मैंने इसे कंटेनर के तत्व में जोड़कर हल किया है जहाँ आपकी पूर्ण स्क्रीन पंक्तियाँ रखी गई हैं: पैडिंग: 0 15px; मार्जिन-वाम: 0px; मार्जिन-राइट: 0px;

— जॉर्रे

2

क्या सभी .rowको एक के भीतर समाहित करने की आवश्यकता नहीं है .container?

— झूला

2

एरिक फूल ने कंटेनर / पंक्ति संबंध पर एक शानदार लेख लिखा , मैं इसे पढ़ने की सलाह देता हूं!

— आइडलबर्ग

27

बूटस्ट्रैप का उपयोग 3.3.5 और .container-fluid, यह है कि मुझे मोबाइल पर कोई गटर या क्षैतिज स्क्रॉलिंग के साथ पूरी चौड़ाई मिलती है। ध्यान दें कि .container-fluid3.1 में फिर से पेश किया गया था।

मोबाइल / टैबलेट पर पूर्ण चौड़ाई, डेस्कटॉप पर 1/4 स्क्रीन

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

सभी प्रस्तावों पर पूर्ण चौड़ाई (मोबाइल, टेबल, डेस्कटॉप)

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>

— angularsen
स्रोत

20

आप सही उपयोग कर रहे हैं div.container-fluidऔर आपको एक div.rowबच्चे की भी आवश्यकता है । फिर, सामग्री को बिना किसी ग्रिड कॉलम के अंदर रखा जाना चाहिए। यदि आप डॉक्स पर एक नजर डालते हैं, तो आप इस पाठ को पा सकते हैं:

उचित संरेखण और पैडिंग के लिए पंक्तियों को एक .container (निश्चित-चौड़ाई) या .container-fluid (पूर्ण-चौड़ाई) के भीतर रखा जाना चाहिए।

स्तंभों के क्षैतिज समूह बनाने के लिए पंक्तियों का उपयोग करें।

यहां बताए गए ग्रिड कॉलम का उपयोग करना ठीक नहीं है:

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

और देख रहा है इस उदाहरण को देखते हुए, आप इस पाठ को पढ़ सकते हैं:

पूर्ण चौड़ाई, एकल स्तंभ : पूर्ण-चौड़ाई वाले तत्वों के लिए कोई ग्रिड वर्ग आवश्यक नहीं है।

यहाँ सही लेआउट का उपयोग करके कुछ तत्वों को दिखाया गया है। इस तरह आपको किसी भी कस्टम CSS या हैक की आवश्यकता नहीं है।

— gerardnll
स्रोत

5

BOOTSTRAP 4 में आप उपयोग कर सकते हैं

<div class="row m-0">
my fullwidth div
</div>

... यदि आप शीर्ष स्तर के div के रूप में .m-0 के बिना सिर्फ एक .row का उपयोग करते हैं, तो आपके पास अवांछित मार्जिन होगा, जो पृष्ठ को ब्राउज़र विंडो की तुलना में व्यापक बनाता है और क्षैतिज स्क्रॉलबार का कारण बनता है।

— फेलिक्स
स्रोत