मैंने निश्चित कंटेनर कक्षा के साथ एक वेबसाइट विकसित करने के लिए ट्विटर बूटस्ट्रैप का उपयोग किया है, लेकिन अब ग्राहक चाहता है कि वेबसाइट 1000px चौड़ाई हो और 1170 पीएक्स न हो। मैं .less फ़ाइलों का उपयोग नहीं करता।बूटस्ट्रैप: मैं कंटेनर की चौड़ाई कैसे बदलूं?
क्या इसे ठीक करने का कोई त्वरित तरीका है?
बूटस्ट्रैप साइट पर Customize अनुभाग पर जाएं और इच्छित आकार चुनें। आपको @gridColumnWidth और @gridGutterWidth चर सेट करना होगा।
उदाहरण के लिए: @gridColumnWidth = 65px और @gridGutterWidth = 20px1000px लेआउट पर परिणाम।
फिर इसे डाउनलोड करें।
ग्रिड कॉलमविड्थ और ग्रिड गटरविड्थ चर बदलकर सटीक 1000 पीएक्स कंटेनर तक नहीं पहुंच सकता है ... क्योंकि (12 * (ग्रिडकॉलमविड्थ) +12 (ग्रिड गटरविड्थ)) 1000 के बराबर नहीं है। और इसलिए मैंने केवल यही समाधान दिया। क्या वो सही है? – prem
सैद्धांतिक रूप से, अनंत संयोजन हैं जो 1000px से मेल खाते हैं। एक उदाहरण: 12 * 65 + 11 * 20 = 1000 (कॉलम के बीच केवल 11 गटर हैं)। – albertedevigo
हुह! मैं वास्तव में साधारण चीज़ को नहीं पहचाना ... वैसे भी आपका उपयुक्त समाधान था। – prem
आप अपनी पीठ के पीछे एक कह रहे हैं कि आप कम फ़ाइलों का उपयोग नहीं करेंगे। मैंने 2.0 का उपयोग करके अपना पहला ट्विटर बूटस्ट्रैप थीम बनाया, और मैंने सीएसएस में सब कुछ किया - एक ओवरराइड.css फ़ाइल बनाना। चीजों को सही ढंग से काम करने में कुछ दिन लग गए।
अब हमारे पास 3.0 है। मैं आपको आश्वस्त करता हूं कि कम सीखने में कम समय लगता है, जो कि सीएसएस के साथ सहज हैं, उन सभी पागल सीएसएस ओवरराइड करने से, अगर आप सीधे सीधी हैं तो बहुत सीधी आगे है। आप जिस तरह से चाहते हैं उसे बदलना केक का एक टुकड़ा है।
बूटस्ट्रैप 3.0 में, कंटेनर वर्ग चौड़ाई को नियंत्रित करता है, और सभी निहित शैलियों कंटेनर को भरने के लिए समायोजित करते हैं। कंटेनर चौड़ाई चर चर के बिना हैं। फ़ाइल नहीं।
// Container sizes
// --------------------------------------------------
// Small screen/tablet
@container-tablet: ((720px + @grid-gutter-width));
// Medium screen/desktop
@container-desktop: ((940px + @grid-gutter-width));
// Large screen/wide desktop
@container-lg-desktop: ((1020px + @grid-gutter-width));
कुछ साइटों या तो पर्याप्त सामग्री 1020 प्रदर्शन को भरने के लिए नहीं है या आप सौंदर्य कारणों के लिए एक संकरा फ्रेम चाहते हैं। क्योंकि बी एस एक 12 स्तंभ ग्रिड का उपयोग करता है मैं 960 के
काम करता है, लेकिन: चर नाम '@ कंटेनर-एसएम', '@ कंटेनर-एमडी' और' @ कंटेनर-एलजी' (अब) –
@ बास्तार्डो अच्छा नाम +1 –
यहाँ की तरह एक से अधिक का उपयोग समाधान है:
@media (min-width: 1200px) {
.container{
max-width: 970px;
}
}
यह कर, बूटस्ट्रैप @Bastardo's जवाब में के रूप में अनुरूपण बनाम का लाभ यह है कि यह नहीं करता है 'है बूटस्ट्रैप फ़ाइल को टी नहीं बदलें। उदाहरण के लिए, यदि सीडीएन का उपयोग करते हैं, तो आप अभी भी सीडीएन से अधिकांश बूटस्ट्रैप डाउनलोड कर सकते हैं।
अधिकतर उत्तर सीडीएन की उपेक्षा करते हैं। आपका जवाब एक आदर्श समाधान है। –
यह उन लोगों के लिए सही है जो सीडीएन का उपयोग कर रहे हैं। बिल्ड समय पर कम (जब 4 आता है, एसएएसएस) को संशोधित करना अपने बूटस्ट्रैप सीएसएस की मेजबानी करने वाले लोगों के लिए सही है। हालांकि, प्रदान किए गए एक के बाद आयातित एक कस्टम कम (या SASS) को संशोधित करने का अर्थ है कि आप अंतर्निहित कम (आमतौर पर) भिन्नता को अपग्रेड कर सकते हैं। –
मुझे पता है कि यह वास्तव में देर हो चुकी है, लेकिन यदि आप चौड़ाई जोड़ते हैं तो दिए गए कंटेनर अब बड़े होते हैं: उपर्युक्त कोड पर ऑटो आप अपने 1170 अधिकतम से अधिक कंटेनर बना सकते हैं। –
1000px चौड़ाई संपत्ति के साथ अपनी सामग्री कंटेनर कक्षा सेट करें और फिर container-fluid कंटेनर के बजाय बूस्टर श्रेणी का उपयोग करें।
काम करता है लेकिन शायद सबसे अच्छा समाधान नहीं हो सकता है।
@ एमसीबीजेम ने पहले से ही यह जवाब दिया है लेकिन यहां थोड़ा और स्पष्टीकरण दिया गया है।
आप बीएस डाउनलोड किए बिना अपनी सीएसएस फ़ाइल में मीडिया क्वेरी का उपयोग करके आसानी से परिवर्तन कर सकते हैं। मैंने अभी यह किया है और यह खूबसूरती से काम करता है।
मीडिया क्वेरी का "न्यूनतम-चौड़ाई" मान सीएसएस को आपके कंटेनर की चौड़ाई को बदलने के लिए 1000px केवल 1200px (या जो भी चौड़ाई आप वहां शामिल करने के लिए चुनते हैं) पर बदल देगा। यह आपकी साइट की प्रतिक्रिया को बरकरार रखता है, इसलिए जब स्क्रीन का आकार उस मान से नीचे कूदता है (छोटे मॉनिटर, टैबलेट, स्मार्टफ़ोन, आदि), तो आपकी साइट अभी भी छोटी स्क्रीन फिट करने के लिए समायोजित होगी।
@media (min-width: 1200px) {
.container {
width: 1000px;
}
}
एक रैपर चयनकर्ता का उपयोग करें और एक कंटेनर बनाएं जिसमें पूरे पृष्ठ को समाहित करने के लिए उस आवरण के अंदर 100% चौड़ाई है।
<style>#wrapper {width: 1000px;}
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
<div class="container">
<div class="row">....
अब अधिकतम चौड़ाई 1000px पर सेट है और आपको कम या एसएएस की आवश्यकता नहीं है।
सीएसएस के इन टुकड़े को अपने सीएसएस स्टाइल में जोड़ें। बूटस्ट्रैप सीएसएस फ़ाइल को ओवरराइट करने के लिए इसे जोड़ने के बाद इसे बेहतर करना बेहतर है।
html, body {
height: 100%;
max-width: 100%;
overflow-x: hidden;
}`
जवाब [यहां] (http://stackoverflow.com/questions/9780333/twitter-bootstrap-fluid-vs-fixed-then-add-in-responsive-how-does-it- का संदर्भ लें ऑल-फिट-टी), मुझे लगता है कि उस समस्या में आपकी समस्या [निश्चित-केवल फीडल] (http://jsfiddle.net/eterpstra/ZR4zz/3/) द्वारा हल की जाएगी। – prem
@prem, tx लेकिन मुझे उदाहरण नहीं मिला क्योंकि यह किसी भी बूटस्ट्रैप कक्षाओं जैसे स्पैन या कंटेनर का उपयोग नहीं करता है। मुझे लगता है कि मुझे इस प्रोजेक्ट की आवश्यकता है कि कंटेनर के अधिकतम को उत्तरदायी बूटस्ट्रैप के साथ 940 पीएक्स पर सेट करना है। – alex
क्या आपने इसे ठीक किया है? – prem