कैसे बूटस्ट्रैप द्रव ग्रिड 12 कॉलम गटर चौड़ाई

Question

डिफ़ॉल्ट बदलने के लिए मैं अगर वहाँ किसी भी सरल समाधान द्रव डिफ़ॉल्ट 12 ग्रिड बूटस्ट्रैप प्रणाली (2.3.0) पर साथ गटर बदलने के लिए जाना जाता है पता करने के लिए देख रहा हूँ।

मैं कम से परिचित नहीं हूं लेकिन अगर यह उत्तर है, तो कृपया यह भी वर्णन करें कि कैसे बदला जा सकता है। सास के साथ वही।

कृपया ध्यान दें कि यह पूरी तरह से स्वीकार्य है उदाहरण के लिए, आधा या एक चौथाई द्वारा गटर चौड़ाई, बदलने के लिए है कि अगर चीजें आसान कर सकते हैं।

निम्नलिखित लक्ष्यों पूरी होनी चाहिए:

1. भविष्य में बूटस्ट्रैप अद्यतन करने के लिए सक्षम होना चाहिए। इसका मतलब वास्तविक बूटस्ट्रैप फ़ाइलों को संपादित नहीं करना है।
2. कार्यक्षमता अन्य सभी वस्तुओं के लिए रहनी चाहिए।
3. सरल होना चाहिए। सीएसएस की 10 से कम लाइनें। उदाहरण के लिए, एक जोड़ा वर्ग या कुछ।

मैंने पूरे स्टैक ओवरफ़्लो की खोज की है और अभी भी मुझे नहीं पता कि मैं ऐसा कुछ करने के बारे में कैसे जा सकता हूं। मेरी समझ में सबसे अच्छा, एक अनुकूलित बूटस्ट्रैप डाउनलोड करने से केवल गैर-द्रव ग्रिड के लिए कस्टम गटर चौड़ाई प्रदान करता है। मैंने पहले अपनी तरल ग्रिड प्रणाली को कोड किया है, इसलिए मैं गणित को समझता हूं, लेकिन मुझे चिंता है कि परिणाम हो सकते हैं और यदि सहायक ओवरराइड पर किसी भी ज्ञात मुद्दे को साझा किया जा सकता है तो यह सहायक होगा।

मैं क्रेडिट देने का वादा करता हूं जहां यह देय है।

अद्यतन:

योदा के जवाब में वर्णित के रूप में कम चर बदलने जाने का रास्ता है। क्या किसी को इन कम चर बदलते हुए कोई अनुभव है? उदाहरण के लिए, मेरा मानना ​​है कि बदलने वाले चर निम्नलिखित हैं:

// Fluid grid 
// ------------------------- 
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); 
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); 

// 1200px min 
@fluidGridColumnWidth1200:  percentage(@gridColumnWidth1200/@gridRowWidth1200); 
@fluidGridGutterWidth1200:  percentage(@gridGutterWidth1200/@gridRowWidth1200); 

// 768px-979px 
@fluidGridColumnWidth768:  percentage(@gridColumnWidth768/@gridRowWidth768); 
@fluidGridGutterWidth768:  percentage(@gridGutterWidth768/@gridRowWidth768); 

कोई इस तरह कुछ बदलने के बारे में कैसे जाता है? शायद:

@fluidGridGutterWidth768:  percentage(1.5); 

यदि किसी ने पहले यह किया है, तो मैं सही दिशा में एक झुंड की सराहना करता हूं।

Answer 1

ट्विटर बूटस्ट्रैप प्रदान करने वाले अनुकूलन डाउनलोड का उपयोग करने का सबसे आसान तरीका संभवतः है। फ़ॉर्म में अपनी आवश्यकताओं के अनुरूप @fluidGridGutterWidth चर बदलें। Download the less files from here। आप GitHub बूटस्ट्रैप परियोजना से variable.less फ़ाइल का उपयोग कर सकते हैं और उसके बाद कोड के इस टुकड़े को बदलने:

// Fluid grid 
// ------------------------- 
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); 
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); // <= this one 

मैंने सोचा कि आप पहली बार में कम फ़ाइलों तक पहुँच था, तब मुझे एहसास हुआ कि आप पर अनुकूलित जीयूआई का उपयोग कर रहे वेबसाइट। बस कम फाइलें डाउनलोड करें, और अपने बदलाव करें। फिर आपको एक सीएसएस फ़ाइल देने या विकास के लिए कम उपयोग करने के लिए कम फ़ाइलों को संकलित करें। आप तैनाती के लिए सीएसएस या min.css का उपयोग कर सकते हैं।

Answer 2

मैं भी इस समस्या के लिए एक आसान समाधान की तलाश में था। मेरा लक्ष्य सरल सीएसएस का उपयोग करना था, कम नहीं। कम उत्तर संकलित करने या बूटस्ट्रैप के ऑनलाइन कंपाइलर का उपयोग करने के आधार पर यह उत्तर मैंने पाया। तो मैंने अपना खुद का समाधान खोजने की कोशिश की।

प्रलेखन पढ़ना आपको गटर-चौड़ाई के बारे में निम्नलिखित मिलेगा: कॉलम पैडिंग के माध्यम से गटर (कॉलम सामग्री के बीच अंतराल) बनाते हैं। उस पैडिंग को पहले और आखिरी कॉलम के लिए पंक्तियों में नकारात्मक मार्जिन के माध्यम से ऑफसेट पर ऑफसेट किया जाता है।

.container {padding-left:1px;padding-right:1px;} 
.row {margin-left:-1px;margin-right:-1px;} 
.row > div {padding-left:1px;padding-right:1px;} 

अब से गटर चौड़ाई केवल 2 पिक्सेल था:

इस आधार पर मैं निम्नलिखित की कोशिश की। मेरी अगली समस्या यह थी कि मेरी इच्छित चौड़ाई एक विषम संख्या थी।

.container {padding-left:0;padding-right:5px;} 
.row {margin-left:0;margin-right:-5px;} 
.row > div {padding-left:0;padding-right:5px;} 

अब मैं 5 पिक्सेल की गटर चौड़ाई: मेरा समाधान paddings और बाईं तरफ के मार्जिन को हटा दें और उन्हें सही पर पूरी तरह से डाल करने के लिए किया गया था।

मैंने बूटस्ट्रैप का उपयोग कर सकने वाले सभी संभावित परिदृश्यों में इसका परीक्षण नहीं किया। विशेष रूप से आपको केवल कंटेनर-डीवी के अंदर एक पंक्ति-div के अंदर कॉलम-डीवी का उपयोग करने के लिए ध्यान देना होगा। लेकिन मेरे मामले में यह बूटस्ट्रैप के मूल स्रोत कोड को स्पर्श किए बिना या कम संकलक का उपयोग किए बिना एक बहुत ही प्रभावी समाधान था।

Answer 3

मुझे लगता है कि आप इसे सोचने पर विचार कर सकते हैं। कम चर बदलने के साथ समस्या यह है कि यह सभी गटर के लिए इसे बदल देगा। तो अगर मुझे सभी लेआउट पर व्यवस्था करने के लिए 15 पीएक्स गटर पसंद है, लेकिन ग्रिटर को उस ग्रिड के अंदर एक फॉर्म के लिए 5px होना चाहिए, तो यह काम नहीं करेगा।

बस उन क्षेत्रों को ओवरराइड करने के लिए 2 सीएसएस कक्षाएं बनाएं जिन्हें आप गटर बदलना चाहते हैं।

इसे "पंक्ति" स्तर पर लागू करें।

.row-5-gutter{ 
    margin-left: -5px; 
    margin-right: -5px; 
} 

इसे "कॉलम" स्तर पर लागू करें।

.col-5-gutter{ 
    padding-left: 5px; 
    padding-right: 5px; 
} 

डेमो: http://jsfiddle.net/tg7Ey/