बूटस्ट्रैप: मैं कंटेनर की चौड़ाई कैसे बदलूं?

Question

मैंने ट्विटर बूटस्ट्रैप का उपयोग निश्चित कंटेनर वर्ग के साथ एक वेबसाइट विकसित करने के लिए किया है, लेकिन अब ग्राहक चाहता है कि वेबसाइट 1000px चौड़ाई की हो न कि 1170px की। मैं .less फ़ाइलों का उपयोग नहीं करता।

क्या इसे ठीक करने का कोई त्वरित तरीका है?

Comments

यहाँ उत्तर का संदर्भ लें , मुझे लगता है कि आपकी समस्या का समाधान उस उत्तर में केवल फिक्स्ड फिडेल द्वारा किया जाएगा ।

— प्रीमियर

@ उदाहरण, tx लेकिन मुझे उदाहरण नहीं मिलता क्योंकि यह बूटस्ट्रैप कक्षाओं जैसे स्पैन या कंटेनर का उपयोग नहीं करता है। मुझे लगता है कि मैं इस परियोजना के लिए उत्तरदायी बूटस्ट्रैप के साथ अधिकतम कंटेनर को 940px पर सेट करना चाहता हूं।

— एलेक्स

Answer 1

बूटस्ट्रैप साइट पर कस्टमाइज़ सेक्शन में जाएं और अपनी पसंद के अनुसार आकार चुनें। आपको सेट @gridColumnWidthऔर @gridGutterWidthवैरिएबल करने होंगे।

उदाहरण के लिए: @gridColumnWidth = 65pxऔर @gridGutterWidth = 20pxएक 1000pxलेआउट पर परिणाम ।

फिर इसे डाउनलोड करें।

Comments

कोई भी ग्रिड 1000 कॉलम में परिवर्तित करके सटीक रूप से 1000px कंटेनर तक नहीं पहुंच सकता है। ग्रिडग्रिडवर्थ और वैरिएबल ... क्योंकि (12 * (ग्रिडक्रॉमीवीडथ) + 12 (ग्रिडग्रिडविदथ) 1000 के बराबर नहीं है। और केवल मैंने ही इसका समाधान दिया है। क्या वो सही है?

— प्रीमियर

सैद्धांतिक रूप से, अनंत संयोजन हैं जो 1000px से मेल खाते हैं। एक उदाहरण: 12 * 65 + 11 * 20 = 1000 (स्तंभों के बीच केवल 11 गटर हैं)।

— albertedevigo

हुह! मैं वास्तव में साधारण बात नहीं पहचानता ... वैसे भी आपके उपयुक्त समाधान है।

— प्रेम

आपकी पोस्ट के लिए धन्यवाद, यह उपयोगी था;) बस एक नोट: व्यावहारिक रूप से 1000 पिक्सेल की चौड़ाई के लिए पूर्ण पिक्सेल का उपयोग करते हुए वास्तव में 7 समाधान होंगे। (कोलम की चौड़ाई १०, २१, ३२, ४३, ५४, ६५ और

— 10६

@dfherr मुझे नहीं पता कि आप वास्तव में क्या मतलब रखते हैं जब आप "व्यावहारिक रूप से" कहते हैं, लेकिन कृपया ध्यान रखें कि CSS पिक्सेल के लिए दशमलव मानों का समर्थन करता है। इसलिए अनंत उपाय हैं। w3.org/TR/CSS21/syndata.html#length-units

— albertedevigo

Answer 2

यहाँ समाधान है:

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

ऐसा करने का फायदा, बूटस्ट्रैप को @ बस्तरो के जवाब में अनुकूलित करने के रूप में है, यह बूटस्ट्रैप फ़ाइल को नहीं बदलता है। उदाहरण के लिए, यदि CDN का उपयोग किया जाता है, तो आप अभी भी CDN से अधिकांश बूटस्ट्रैप डाउनलोड कर सकते हैं।

Comments

अधिकांश उत्तर सीडीएन की उपेक्षा करते हैं। आपका जवाब एक सही समाधान है।

— चार्ल्स वाटसन

यह उन लोगों के लिए एकदम सही है जो CDN का उपयोग कर रहे हैं। कम से कम (जब 4 आता है, तो SASS) को संशोधित करते हुए बिल्ड समय पर अपने बूटस्ट्रैप सीएसएस की मेजबानी करने वाले लोगों के लिए एकदम सही है। हालाँकि, एक कस्टम LESS (या SASS) को संशोधित करने के बाद आयात किया जाता है, जिसका अर्थ है कि आप अंतर्निहित LESS को बिना (आमतौर पर) अलग कर सकते हैं।

— ग्रेग पेटिट

मुझे पता है कि यह वास्तव में देर हो चुकी है, लेकिन दिए गए कंटेनर अब बड़े हो जाते हैं यदि आप चौड़ाई जोड़ते हैं: उपरोक्त कोड के लिए ऑटो आप कंटेनरों को उनके 1170 अधिकतम से बड़ा बना सकते हैं।

— रिक काल्डर

यह वही है जिसकी मुझे तलाश थी। धन्यवाद।

— टेडेबस

Answer 3

आप अपनी पीठ पीछे यह कहते हुए बांध रहे हैं कि आप कम फ़ाइलों का उपयोग नहीं करेंगे। मैंने 2.0 का उपयोग करके अपना पहला ट्विटर बूटस्ट्रैप थीम बनाया, और मैंने सीएसएस में सब कुछ किया - एक ओवरराइड।एससीएस फ़ाइल का निर्माण। चीजों को सही ढंग से काम करने में कई दिन लग गए।

अब हमारे पास 3.0 है। मैं आपको आश्वस्त करता हूं कि LESS को सीखने में कम समय लगता है, जो कि सीएसएस के साथ सहज है अगर आप सीएसएस के साथ उन सभी को ओवरराइड करने की तुलना में सहज हैं। आप जैसा चाहते हैं, उसमें बदलाव करना केक का एक टुकड़ा है।

बूटस्ट्रैप 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 की तरह एक का उपयोग करता हूं।

Comments

काम करता है, लेकिन: चर नाम हैं @container-sm, @container-mdऔर @container-lg(अब)

— एंड्रियास डॉक

@Bastardo अच्छा नाम +1

— Ömer एक

Answer 4

@ mcbjam ने पहले ही यह जवाब दे दिया था लेकिन यहाँ थोड़ा और स्पष्टीकरण दिया गया है।

आप बीएस को डाउनलोड किए बिना अपनी सीएसएस फ़ाइल में मीडिया क्वेरी का उपयोग करके आसानी से बदलाव कर सकते हैं। मैंने बस यही किया और यह खूबसूरती से काम करता है।

मीडिया क्वेरी का "न्यूनतम-चौड़ाई" मान CSS को आपके कंटेनर की चौड़ाई को केवल 1200px से बड़ी स्क्रीन पर बदलने के लिए (या जो भी चौड़ाई आप वहां शामिल करने के लिए चुनते हैं) को बताएगा । यह आपकी साइट की जवाबदेही को बरकरार रखता है, इसलिए जब स्क्रीन आकार उस मान (छोटे मॉनिटर, टैबलेट, स्मार्टफोन, आदि) से नीचे कूदता है, तो आपकी साइट अभी भी छोटे स्क्रीन को फिट करने के लिए समायोजित होगी।

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

Answer 5

बूटस्ट्रैप 4 के लिए, यदि आप यहां Sass का उपयोग कर रहे हैं तो संपादित करने के लिए चर है

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

इस चर को ओवरराइड करने के लिए मैंने बूटस्ट्रैप आयात करने से पहले अपने .sass फ़ाइल में बिना डिफॉल्ट के $ कंटेनर-अधिकतम-चौड़ाई घोषित की।

नोट: मुझे केवल xl मान को बदलने की आवश्यकता है इसलिए मैंने ब्रेकप्वाइंट के बारे में सोचने की परवाह नहीं की।

Answer 6

अपनी सामग्री कंटेनर क्लास को 1000px चौड़ाई की संपत्ति के साथ सेट करें और फिर कंटेनर के बजाय कंटेनर-द्रव बूस्टर क्लास का उपयोग करें।

काम करता है, लेकिन सबसे अच्छा समाधान नहीं हो सकता है।

Answer 7

एक आवरण चयनकर्ता का उपयोग करें और एक कंटेनर बनाएं जिसमें उस आवरण के अंदर 100% चौड़ाई हो जो पूरे पृष्ठ को एनकैप्सुलेट कर सके।

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

अब अधिकतम चौड़ाई 1000px पर सेट है और आपको कोई कम या एसएएस की आवश्यकता नहीं है।

Answer 8

कंटेनर आकार

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

में खंड कंटेनर आकार, परिवर्तन 1140करने के लिए970

मुझे आशा है कि इसकी मदद से आप।

---

आपके सही करने के लिए धन्यवाद। अनुकूलित बूटस्ट्रैप के लिए लिंक: https://getbootstrap.com/docs/3.4/customize/

Answer 9

अपने सीएसएस स्टाइल में सीएसएस के इन टुकड़ों को जोड़ें। बूटस्ट्रैप css फ़ाइल को जोड़ने के बाद इसे जोड़ने के लिए इसे जोड़ना बेहतर होगा।

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`