क्या मैं बूटस्ट्रैप में col-md-1.5 दे सकता हूं?

Question

मैं ट्विटर Boststrap में कॉलम समायोजित करना चाहता हूं।

मुझे पता है कि बूटस्ट्रैप में 12 कॉलम ग्रिड होते हैं। वहाँ 3 3 3 3 के बजाय 1.5 3.5 3.5 3.5 करने के लिए ग्रिड में हेरफेर करने के लिए कोई रास्ता नहीं है?

Comments

जैसा कि @ bodi0 ने सही कहा है, यह संभव नहीं है। आपको या तो बूटस्ट्रैप की ग्रिड प्रणाली को सीमित करना होगा (आप विभिन्न समाधान खोज सकते हैं और पा सकते हैं) या नेस्टेड पंक्तियों का उपयोग कर सकते हैं जैसे bootply.com/dd50he9tGe । नेस्टेड पंक्तियों के मामले में आपको हमेशा सटीक परिणाम नहीं मिल सकता है लेकिन एक समान है।

— टासोस के।

@TasosK। आपका उदाहरण मेरे लिए काम किया आप इसे उत्तर में लिख सकते हैं मैं इसे स्वीकार करूंगा। धन्यवाद

— संध्या Gor

यह अच्छा है, मैंने एक जवाब पोस्ट किया

— त्सोस के।

यदि v4 का उपयोग किया जाता है, तो इसे देखें - stackoverflow.com/a/46838552/4050261

— आदर्श मादरेचा

Answer 1

जैसा कि @ bodi0 ने सही कहा है , यह संभव नहीं है। आपको या तो बूटस्ट्रैप की ग्रिड प्रणाली को सीमित करना होगा (आप विभिन्न समाधानों को खोज और पा सकते हैं, यहां 7-स्तंभ उदाहरण है) या नेस्टेड पंक्तियों का उपयोग करें जैसे http://bootply.com/dd50he9tGe ।

नेस्टेड पंक्तियों के मामले में आपको हमेशा सटीक परिणाम नहीं मिल सकता है लेकिन एक समान है

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

Answer 2

आप क्लाउड भी बस कॉलम की चौड़ाई को ओवरराइड करते हैं ...

<div class="col-md-1" style="width: 12.499999995%"></div>

जबसे col-md-1 चौड़ाई 8.33333333% है; बस 8.33333333 * 1.5 गुणा करें और इसे अपनी चौड़ाई के रूप में सेट करें।

में bootstrap 4, आपको फ्लेक्स और अधिकतम-चौड़ाई की संपत्ति को भी ओवरराइड करना होगा:

<div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>

Comments

शानदार काम करता है, मुझे घंटों बचाया। अभी भी अपनी जवाबदेही को बनाए रखता है

— defcde

लेकिन ml-sm-autoवर्ग अभी भी इस कस्टम चौड़ाई मान को नजरअंदाज करेगा: / (इसलिए पृष्ठ जवाबदेही टूट जाएगी)

— मुफ्लिक्स

अच्छा, लेकिन आपने वास्तविक सटीक परिणाम के रूप में सिर्फ 12.5 का उपयोग क्यों नहीं किया? :)

— एंड्रयू

Answer 3

संक्षिप्त उत्तर नहीं है (तकनीकी रूप से आप जो चाहें कक्षा का नाम दे सकते हैं, लेकिन इसका कोई प्रभाव नहीं होगा, जब तक कि आप अपने खुद के सीएसएस वर्ग को परिभाषित नहीं करते - और याद रखें - कक्षा चयनकर्ता में कोई डॉट्स नहीं )। लंबा उत्तर फिर से नहीं है , क्योंकि बूटस्ट्रैप में एक उत्तरदायी , मोबाइल पहला द्रव ग्रिड सिस्टम शामिल है जो उपकरण या दृश्य पोर्ट आकार में 12 कॉलम तक उचित रूप से मापता है ।

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

• स्तंभों के क्षैतिज समूह बनाने के लिए पंक्तियों का उपयोग करें।
• सामग्री को कॉलम के भीतर रखा जाना चाहिए, और केवल कॉलम पंक्तियों के तत्काल बच्चे हो सकते हैं।
• पूर्वनिर्धारित ग्रिड कक्षाएं जैसे .rowऔर.col-xs-4 ग्रिड लेआउट बनाने के लिए उपलब्ध हैं। कम मिश्रण का उपयोग अधिक अर्थ लेआउट के लिए भी किया जा सकता है।
• कॉलम पैडिंग के माध्यम से गटर (स्तंभ सामग्री के बीच अंतराल) बनाते हैं। वह पैडिंग नकारात्मक मार्जिन के माध्यम से पहले और अंतिम कॉलम के लिए पंक्तियों में ऑफसेट है .rows।
• ग्रिड कॉलम आप उपलब्ध बारह बार उपलब्ध कॉलमों की संख्या निर्दिष्ट करके बनाए जाते हैं। उदाहरण के लिए, तीन बराबर स्तंभ तीन का उपयोग करेंगे .col-xs-4।
• यदि 12 से अधिक कॉलम एक पंक्ति में रखे जाते हैं, तो अतिरिक्त कॉलम का प्रत्येक समूह, एक इकाई के रूप में, एक नई पंक्ति में लिपटेगा।
• ग्रिड कक्षाएं ब्रेकपॉइंट आकार से अधिक या उसके बराबर स्क्रीन चौड़ाई वाले उपकरणों पर लागू होती हैं, और छोटे उपकरणों पर लक्षित ग्रिड कक्षाओं को ओवरराइड करती हैं। इसलिए, उदाहरण के लिए किसी भी .col-md-*वर्ग को एक तत्व में लागू करना न केवल मध्यम उपकरणों पर, बल्कि बड़े उपकरणों पर भी इसकी स्टाइल को प्रभावित करेगा यदि एक .col-lg-*वर्ग मौजूद नहीं है।

आपकी समस्या का एक संभावित समाधान यह है कि आप अपनी स्वयं की CSS कक्षा को इच्छित चौड़ाई के साथ परिभाषित करें , मान लें कि .col-half{width:XXXem !important}इस वर्ग को मूल बूटस्ट्रैप CSS कक्षाओं के साथ इच्छित तत्वों में जोड़ें।

Answer 4

बूटस्ट्रैप 4 फ्लेक्स-बॉक्स का उपयोग करता है और आप अपनी स्वयं की कॉलम परिभाषाएँ बना सकते हैं

यह एक 1.5 के करीब है, अपनी खुद की जरूरतों के लिए ट्विक करें।

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

Answer 5

चौड़ाई को अधिलेखित करने के लिए नई कक्षाएं बनाएं। काम कोड के लिए jFiddle देखें ।

<div class="row">
  <div class="col-xs-1 col-xs-1-5">
    <div class="box">
      box 1
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 2
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 4
    </div>
  </div>
</div>

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

Answer 6

जैसा कि अन्य ने बूटस्ट्रैप 3 में उल्लेख किया है, आप घोंसला / एम्बेड तकनीक का उपयोग कर सकते हैं।

हालाँकि अब बूटस्ट्रैप 4 से बहुत बढ़िया फीचर का उपयोग करना स्पष्ट हो रहा है। आपके पास अपनी सामग्री की प्राकृतिक चौड़ाई के आधार पर कॉलम के आकार को स्वतः बनाने के लिए col-{breakpoint}-autoवर्गों (जैसे col-md-auto) का उपयोग करने का विकल्प सरल है । उदाहरण के लिए इसे जांचें

Answer 7

रेक्स ब्लूम प्रतिक्रिया के अनुसार मैंने बूटस्ट्रैप सहायक लिखा है:

//8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}

Answer 8

बूटस्ट्रैप में कॉलम ऑफ़सेट हैं, इसलिए यदि आप आकार का उपयोग किए बिना निर्दिष्ट चौड़ाई के बराबर स्तंभ चाहते हैं।

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

इस लिंक https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints की भी जाँच करें

Answer 9

यह colst-md-1.5 देने के लिए बूटस्ट्रैप मानक नहीं है और आप बूटस्ट्रैप.min.cs को संपादित नहीं कर सकते क्योंकि सही तरीका नहीं है। आप इस तरह बना सकते हैं http://www.bootply.com/125259

Answer 10

आप इस कोड का उपयोग col-md-3, col-md-9 के अंदर कर सकते हैं

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

Answer 11

यह प्रश्न काफी पुराना है, लेकिन मैंने इसे (TYPO3 में) इस तरह से बनाया है।

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

फिर, मैंने 11 कॉलम (1 - 9 - 1) के साथ एक बाहरी तीन कॉलम तत्व बनाया है, आखिरकार, मैंने सीएसएस के साथ पहले और तीसरे कॉलम की कॉलम चौड़ाई को 12.499999995% पर संशोधित किया है।