ट्विटर बूटस्ट्रैप में पांच बराबर कॉलम

Question

मैं चाहता हूं कि मेरे द्वारा बनाए जा रहे पृष्ठ पर 5 बराबर कॉलम हों और मैं यह नहीं समझ पा रहा हूं कि 5 कॉलम ग्रिड का उपयोग यहां कैसे किया जा रहा है: http://web.archive.org/web/20120416024539/http://domain7 .com / मोबाइल / उपकरण / बूटस्ट्रैप / उत्तरदायी

क्या पांच कॉलम ग्रिड को ट्विटर बूटस्ट्रैप फ्रेमवर्क के ऊपर दिखाया जा रहा है?

Comments

आप बूटस्ट्रैप के बहुत पुराने संस्करण को देख रहे हैं। क्या आप (नवीनतम, मुझे आशा है) बूटस्ट्रैप पर 5-कॉलम "उत्तरदायी" ग्रिड देख रहे हैं?

— एंड्रेस इलिच

मुझे अभी पता चला है कि एक कहा गया है। v1.3.0 और वर्तमान 2.0.2 है। नवीनतम संस्करण 12-कॉलम ग्रिड का अर्थ है, जिसमें मैं 2,3,4 और 6 बराबर कॉलम रख सकता हूं। मैं पूछ रहा था कि क्या है, यदि बहुत सी चीजों को बदले बिना 5 बराबर कॉलम रखना संभव होगा।

— गंडालफ

आप कर सकते हैं, हाँ, लेकिन इसमें कुछ ग्रिड तत्वों और उत्तरदायी ग्रिड तत्वों के लिए भारी संशोधनों की आवश्यकता होगी। क्या आपकी साइट बिल्कुल उत्तरदायी है? इस तरह से उत्तर के साथ आना थोड़ा आसान होगा, अन्यथा यह बहुत सारे कोड होंगे।

— एंड्रेस इलिच

हां, साइट उत्तरदायी है लेकिन मुझे ग्रिड तत्वों को भी संशोधित करना होगा न कि केवल उत्तरदायी भाग को।

— गंडालफ

मुझे कुछ सफलता प्राप्त हो रही है * .container.one- पाँचवाँ। कॉलम {चौड़ाई: 17%; } हालांकि मैं अपनी सांस लेने के लिए कुछ विस्मयकारी उम्मीद कर रहा हूं ।.17.87847% भी।

— गंडालफ

Answer 1

स्पैन 2 के एक वर्ग के साथ पांच डिवीजनों का उपयोग करें और पहले ऑफसेट 1 की एक कक्षा दें।

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

देखा! पाँच समान रूप से स्थानिक और केन्द्रित स्तंभ।

---

बूटस्ट्रैप 3.0 में, यह कोड जैसा दिखेगा

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

Comments

यह पूरी चौड़ाई पर नहीं जाता है। हालांकि यह अच्छा है

— machineaddict

मैंने जो समाधान पोस्ट किया है वह पूरी चौड़ाई में जाता है और 5 बराबर कॉलम बनाता है: यहाँ जवाब है ।

— फ़िज़िक्स

पूरी चौड़ाई नहीं जाती है जैसे उत्तर @fizzix नीचे प्रदान करता है। दोनों तरफ एक अवांछित मार्जिन बनाता है, जैसे - jsfiddle.net/wdo8L1ww

— Fizzix

कॉलम इस समाधान के बजाय छोटे दिखते हैं, इसलिए मैं @fizzix समाधान पसंद करता हूं

— dc2009

बूटस्ट्रैप 4 5 कॉल (पूर्ण-चौड़ाई) के लिए कोई CSS या SASS की आवश्यकता नहीं है: stackoverflow.com/a/42226652/171456

— Zim

Answer 2

बूटस्ट्रैप 3 और इसके बाद के संस्करण के लिए

ट्विटर बूटस्ट्रैप के साथ एक शानदार पूर्ण चौड़ाई 5 कॉलम लेआउट यहां बनाया गया था ।

यह बूटस्ट्रैप 3 के साथ मूल रूप से काम करने के बाद अब तक का सबसे उन्नत समाधान है। यह आपको उत्तरदायी डिजाइन के लिए वर्तमान बूटस्ट्रैप कक्षाओं के साथ जोड़ी में फिर से और फिर से कक्षाओं का उपयोग करने की अनुमति देता है।

CSS:
इसे अपनी वैश्विक स्टाइलशीट में जोड़ें, या अपने bootstrap.cssदस्तावेज़ के निचले भाग में भी ।

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

इसे इस्तेमाल करने के लिए रखो!
उदाहरण के लिए, यदि आप एक दिव्य तत्व बनाना चाहते हैं जो मध्यम स्क्रीनों पर पाँच कॉलम लेआउट की तरह व्यवहार करता है और छोटे स्तंभों पर दो कॉलम की तरह, तो आपको बस कुछ इस तरह का उपयोग करने की आवश्यकता है:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

कार्यशील डेमो - स्तंभों को संवेदनशील देखने के लिए फ्रेम का विस्तार करें।

ANOTHER DEMO -col-*-5thsजैसेcol-*-3और केसाथनईकक्षाओं कोशामिल करनाcol-*-2। col-xs-6उत्तरदायी दृश्य मेंउन सभी परिवर्तन को देखने के लिए फ्रेम का आकार बदलें।

---

बूटस्ट्रैप 4 के लिए

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

यहाँ एक उदाहरण है:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

काम कर रहा डेमो

Comments

उन्हें कॉल करना col-*-15भ्रामक हो सकता है। ऐसा लगता है कि वे 15-कॉलम ग्रिड सिस्टम का हिस्सा हैं, जो वे नहीं हैं।

— पॉल डी। वेट

@ PaulD.Waite - मैंने लोगों को बताने के लिए अपने उत्तर में थोड़ा ध्यान दिया।

— फिज़िक्स

col-*-15मेरे साथ ठीक है, लेकिन col-*-5thsथोड़ा कम भ्रमित करने वाला कॉलम नाम हो सकता है। यही कारण है कि मैं उपयोग कर रहा हूं ताकि मेरे अन्य डेवलपर्स मुझे भ्रमित न करें।

— मॉर्ड्रेड

अरे @scragar - यदि आप सभी बूटस्ट्रैप के मौजूदा कॉलम कक्षाओं के लिए स्टाइल देखते हैं, तो आप देखेंगे कि वे सभी शामिल हैं position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;। मूल रूप से, मैंने जो कोड पोस्ट किया है, वह सिर्फ इस पर विस्तारित हो रहा है ताकि वे बूटस्ट्रैप के बिल्ट इन स्टाइलिंग से मेल खाएं। फिर मैं इसकी एक चौड़ाई लागू करता हूं 20%ताकि पूरे पृष्ठ पर 5 बराबर कॉलम फिट हो सकें। बहुत ही सरल :)

— फ़िज़िक्स

2/5 कॉलम के नामकरण के बारे में कैसे? या हमें उपयोग करना चाहिए: col-md-1ths for 1/5 और col-md-2ths for 2/5, col-md-5ths for 5/5 = full चौड़ाई?

— एलेक्स

Answer 3

के लिए बूटस्ट्रैप 3 , अगर आप चाहते पूर्ण-चौड़ाई और प्रयोग कर रहे हैं LESS, SASS, या कुछ इसी तरह, तुम सब करने की ज़रूरत के मेकअप इस्तेमाल होता है बूटस्ट्रैप के mixin कार्यों make-md-column , make-sm-columnआदि

कम से:

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

एस.ए.एस.एस.:

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

न केवल आप का निर्माण कर सकते सच्चे पूर्ण-चौड़ाई बूटस्ट्रैप स्तंभ वर्गों इन mixins का उपयोग कर, लेकिन साथ ही सभी निर्माण कर सकते हैं संबंधित सहायक वर्गों की तरह .col-md-push-*, .col-md-pull-*है, और .col-md-offset-*:

कम से:

.col-md-push-2-4{
  .make-md-column-push(2.4)
}
.col-md-pull-2-4{
  .make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  .make-md-column-offset(2.4)
}

एस.ए.एस.एस.:

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

अन्य उत्तर सेटिंग के बारे में बात करते हैं @gridColumnsजो पूरी तरह से मान्य है, लेकिन यह सभी बूटस्ट्रैप के लिए कोर कॉलम की चौड़ाई को बदलता है। उपरोक्त मिक्सर फ़ंक्शंस का उपयोग करने से डिफ़ॉल्ट बूटस्ट्रैप कॉलम के शीर्ष पर 5 कॉलम लेआउट जुड़ जाएगा, इसलिए यह किसी भी 3 पार्टी टूल या मौजूदा स्टाइल को नहीं तोड़ देगा।

Comments

सबसे साफ समाधान, जैसा 2.4कि 12 में से 5 है ( 2.4*5=12), 12-कॉलम ग्रिड में बूटस्ट्रैप 3 के लिए काम करता है। के लिए भी लागू होता है make-xs, make-smलेकिन यह अन्य मानक कॉल परिभाषाओं के लिए संयुक्त काम नहीं करेगा (नवीनतम प्राथमिकता प्राप्त करें)

— शेरब्रो

मैं इस जवाब के लिए तुलनात्मक रूप से कुछ अपवित्रों पर हैरान हूं। यह अभी तक कम से कम हैकी है, न केवल अन्य बूटस्ट्रैप कॉलम वर्गों के समान नामकरण सम्मेलन का उपयोग करते हुए, बल्कि एक ही मिश्रण बूटस्ट्रैप अपने स्वयं के कॉलम बनाने के लिए उपयोग करता है, जो संभवतः बूटस्ट्रैप 4 तक भविष्य के प्रमाण को कम से कम बनाता है।

— क्रिस फ्रिट्ज

यह सबसे अच्छा जवाब माना जाता है। मैंने अपने स्वयं के उपयोग के लिए इस पर आधारित एक पुस्तकालय (शामिल करने के लिए offset, pullऔर push) बनाया है । बेझिझक इसे बाहर की जाँच करें

— केनी की

जैसा कि सभी ने कहा है, हाँ अब यह सही उत्तर है। @Sherbrow ने कहा कि वे "अन्य मानक कॉल परिभाषाओं के साथ संयुक्त काम नहीं करेंगे" लेकिन यह इसलिए नहीं है क्योंकि यह समाधान किसी तरह से गलत है, बस इसलिए कि 12% 5! = 0.

— निक एम

@ lightswitch05 दुर्भाग्य से यह मेरे लिए उपयुक्त नहीं था क्योंकि मेरे पास कॉलम की एक गतिशील राशि थी। अगर मेरे पास केवल एक कॉलम था, तब भी मैं चाहता था कि यह स्क्रीन का 5 वां हिस्सा हो, लेकिन फ़िज़िक्स के उत्तर का उपयोग करते हुए एक कॉलम पूरे स्क्रीन को कवर करेगा। मैं नए बूटस्ट्रैप 4 मिक्सिन फ़ंक्शंस का उपयोग करके इसे हल करने में कामयाब रहा। यदि आप चाहें, तो इसे शामिल करने के लिए मैं आपके उत्तर को अपडेट कर सकता हूं?

— रोकें

Answer 4

अपडेट 2019

बूटस्ट्रैप 4.1+

ऑटो-लेआउट ग्रिड का उपयोग करके यहां 5 बराबर, पूर्ण-चौड़ाई वाले स्तंभ ( कोई अतिरिक्त CSS या SASS ) नहीं हैं :

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://www.codeply.com/go/MJTglTsq9h

यह समाधान काम करता है क्योंकि बूटस्ट्रैप 4 अब फ्लेक्सबॉक्स है। आप .rowएक ब्रेक का उपयोग करके 5 कॉलम प्राप्त कर सकते हैं जैसे कि <div class="col-12"></div>या <div class="w-100"></div>प्रत्येक 5 कॉलम।

इसे भी देखें: बूटस्ट्रैप - 5 कॉलम लेआउट

Comments

इसके स्थिर होने की प्रतीक्षा नहीं कर सकते हैं :)

— निकोलसियस

अच्छा है लेकिन केवल 5 तत्वों की पंक्तियों के साथ काम करता है। यदि आप अधिक प्राप्त करते हैं तो आप गलत हैं। मेरी enhenced फिडेल यहाँ देखें: jsfiddle.net/djibe89/ntq8h910

— djibe

इसलिए मैंने आपको समझाया कि आपको हर 5 कॉलम का उपयोग करना होगा। आपका समाधान काम करता है लेकिन अतिरिक्त CSS की आवश्यकता होती है।

— ज़िम

इसके अलावा जोड़ने पर विचार flex-nowrapकरने के लिए .rowके बाद से (स्वचालित) कॉलम माता पिता चौड़ाई पार कर सकते हैं।

— ल्यूक स्केटर

Answer 5

नीचे @machineaddict और @Mafnah उत्तरों का कॉम्बो है, जो बूटस्ट्रैप 3 के लिए फिर से लिखा गया है (मेरे लिए अब तक अच्छा काम कर रहा है):

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}

Comments

मैं इसे कहां रखूं और इसका उपयोग कैसे करूं?

— सर्गसर्ज

@Serg 1. बूटस्ट्रैप सीएसएस फ़ाइल के बाद इसे नीचे रखें। 2. .fivecolumns वर्ग को .row में जोड़ें, फिर वर्ग के साथ पाँच स्तंभों को घोंसला दें ।col [, - sm, -lg] -2

— plaidcorp

कुछ मामलों में सही पूर्ण चौड़ाई नहीं जाती है।

— फ़िज़िक्स

कोल-एक्स -2 को घोषणाओं में क्यों नहीं जोड़ा गया है?

— गैंडर्स

@ganders सिर्फ एक दृष्टि से; इस पृष्ठ पर एक और उत्तर देखें: stackoverflow.com/questions/10387740/…

— plaidcorp

Answer 6

12 कॉलम के साथ मूल बूटस्ट्रैप रखें, इसे अनुकूलित न करें। एकमात्र संशोधन जिसे आपको करने की आवश्यकता है, वह मूल बूटस्ट्रैप उत्तरदायी सीएसएस के बाद कुछ सीएसएस है, जैसे:

निम्नलिखित कोड को बूटस्ट्रैप 2.3.2 के लिए परीक्षण किया गया है:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

और HTML:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

नोट: भले ही स्पैन २ बार ५ में १२ कॉलम न के बराबर हों, आपको यह विचार आता है :)

एक कार्यशील उदाहरण यहां पाया जा सकता है http://jsfiddle.net/v3Uy5/6/

Answer 7

यदि आपको उन स्तंभों की सटीक चौड़ाई की आवश्यकता नहीं है, तो आप नेस्टिंग का उपयोग करके 5-कॉलम बनाने का प्रयास कर सकते हैं:

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

jsfiddle

पहले दो कॉलम की चौड़ाई 5/12 * 1/2 ~ 20.83% होगी

अंतिम तीन कॉलम: 7/12 * 1/3 ~ 19.44%

इस तरह के हैक कई मामलों में स्वीकार्य परिणाम देते हैं और किसी भी सीएसएस परिवर्तन की आवश्यकता नहीं होती है (हम केवल मूल बूटस्ट्रैप कक्षाओं का उपयोग कर रहे हैं)।

Answer 8

5 कॉलम लेआउट के लिए एक कस्टम बूटस्ट्रैप डाउनलोड बनाएं

पर जाएं बूटस्ट्रैप 2.3.2 (या बूटस्ट्रैप 3 ) अनुकूलन पेज और निम्न चर (इनपुट नहीं अर्धविराम करते हैं) को सेट करें:

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

अपने बिल्ड डाउनलोड करें। यह ग्रिड डिफ़ॉल्ट कंटेनरों में फिट होगा, डिफ़ॉल्ट गटर की चौड़ाई (लगभग) को संरक्षित करेगा।

नोट: यदि आप LESS का उपयोग कर रहे हैं, तो variables.lessइसके बजाय अपडेट करें ।

Answer 9

Flexbox http://output.jsbin.com/juz-28 के साथ

.flexrow {
  display: flex;
  background: lightgray; /*for debug*/
}
.flexrow > * {
  flex: 1;
  margin: 1em;
  outline: auto green;
}

<div class="flexrow">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...<br>..</div>
  <div>...</div>
</div>

Comments

फ्लेक्सबॉक्स बूटस्ट्रैप से बेहतर है अगर यह आपकी आवश्यकताओं के अनुरूप है।

— ml242

Answer 10

मैंने मफनाह के जवाब को वोट दिया, लेकिन फिर से इसे देखते हुए मैं निम्नलिखित सुझाव दूंगा कि यदि आप डिफ़ॉल्ट मार्जिन आदि रख रहे हैं तो बेहतर है।

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}

Comments

वास्तविक चौड़ाई 17.94872% है और यह उत्तरदायी नहीं है, आपको सभी @media प्रश्नों में प्रत्येक कॉलम के लिए एक नया मार्जिन सेट करना होगा।

— मशिनहेडिक जूल

Answer 11

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}

Comments

यह होना चाहिए। असमान .span2 {चौड़ाई: 20%; }

— स्टूडियो 4

... और यह काम नहीं कर रहा है। पहले कॉलम को छोड़कर प्रत्येक कॉलम में मार्जिन बाकी है।

— मशिनहेडिक

Answer 12

वर्ग col-sm-2 के साथ 5 तत्व बनाएं और प्रथम तत्व को भी वर्ग col-sm-ऑफ़सेट -1 में जोड़ें

पीएस यह पूरी चौड़ाई नहीं होगी (यह स्क्रीन के दाएं और बाएं से थोड़ा सा इंडेंट होगा)

कोड कुछ इस तरह दिखना चाहिए

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>

Answer 13

बूटस्ट्रैप 4, प्रति पंक्ति कॉलम की चर संख्या

आप करना चाहते हैं पर निर्भर प्रति पंक्ति पांच कॉलम, ताकि स्तंभों की संख्या कुछ कम अभी भी केवल ऊपर प्रत्येक पंक्ति के 1 / 5th लेते हैं, समाधान बूटस्ट्रैप 4 उपयोग करने के लिए है mixins :

एससीएसएस:

.col-2-4 {
    @include make-col-ready(); // apply standard column margins, padding, etc.
    @include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

HTML:

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>

Answer 14

बूटस्ट्रैप 3 में 5 कॉलम को सक्षम करने का दूसरा तरीका बूटस्ट्रैप द्वारा डिफ़ॉल्ट रूप से उपयोग किए जाने वाले 12 कॉलम प्रारूप को संशोधित करना है। और फिर एक 20 कॉलम ग्रिड बनाएं (बूटस्ट्रैप वेबसाइट पर कस्टमाइज़ करें या LESS / SASS संस्करण का उपयोग करें)।

बूटस्ट्रैप वेबसाइट पर कस्टमाइज़ करने के लिए, कस्टमाइज़ और डाउनलोड पेज पर जाएं, इससे वेरिएबल @grid-columnsको अपडेट 12करें 20। तब आप 4 और साथ ही 5 कॉलम बना पाएंगे।

Answer 15

यह घोंसले के शिकार और थोड़ा सीएसएस ओवर-राइड का उपयोग करके किया जा सकता है।

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div>​<!-- end outer row -->

फिर कुछ सी.एस.

@media  (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}

div.col-sm-5.five-two {
width: 40% !important;
}

}

यहाँ एक उदाहरण है: 5 बराबर स्तंभ उदाहरण

और यहाँ कोडरवॉल पर मेरा पूरा लेखन है

बूटस्ट्रैप 3 में पांच बराबर कॉलम

Answer 16

मेरी राय में इसे कम सिंटैक्स के साथ इस तरह से उपयोग करना बेहतर है। इस उत्तर पर आधारित है जवाब @fizzix

इस तरह से कॉलम चर (@ ग्रिड-गटर-चौड़ाई, मीडिया ब्रेकप्वाइंट) का उपयोग करते हैं जो उपयोगकर्ता को ओवरराइड कर सकता है और 12 कॉलम ग्रिड के व्यवहार के साथ पांच कॉलम का व्यवहार मेल खाता है।

/*
 * Special grid for ten columns, 
 * using its own scope 
 * so it does not interfere with the rest of the code
 */

& {
    @import (multiple) "../bootstrap-3.2.0/less/variables.less";
    @grid-columns: 5;
    @import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

    @column: 1;
    .col-xs-5ths {
        .make-xs-column(@column);
    }

    .col-sm-5ths {
        .make-sm-column(@column);
    }

    .col-md-5ths {
        .make-md-column(@column);
    }

    .col-lg-5ths {
        .make-lg-column(@column);
    }
}

/***************************************/
/* Using default bootstrap now
/***************************************/

@import  (multiple) "../bootstrap-3.2.0/less/variables.less";
@import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

/* ... your normal less definitions */

Answer 17

यह कमाल का है: http://www.ianmccullough.net/5-column-bootstrap-layout/

बस करो:

<div class="col-xs-2 col-xs-15">

और सीएसएस:

.col-xs-15{
    width:20%;
}

Answer 18

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

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

और कुछ html कोड

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Answer 19

डिफ़ॉल्ट रूप से बूटस्ट्रैप 12 कॉलम तक बढ़ सकता है? इसका मतलब है कि अगर हम समान चौड़ाई का 12-कॉलम लेआउट बनाना चाहते हैं, तो हम div वर्ग = "col-md-1" बारह बार लिखेंगे।

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

Answer 20

ट्विटर बूटस्ट्रैप शैली के साथ 5 कॉलम लेआउट

.col-xs-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}

Answer 21

ऐसा समाधान जिसके लिए बहुत सीएसएस की आवश्यकता नहीं है, और न ही बूटस्ट्रैप डिफ़ॉल्ट 12col लेआउट को ट्वीक करने की आवश्यकता है:

http://jsfiddle.net/0ufdyeur/1/

HTML:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

सीएसएस:

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}

Answer 22

बस एक नया वर्ग बनाएं और प्रत्येक मीडिया क्वेरी के अनुसार उसके व्यवहार को आवश्यकतानुसार परिभाषित करें

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

यहाँ एक वर्किंग डेमो https://codepen.io/giorgosk/pen/BRVorW है

Answer 23

बूटस्ट्रैप 3 में, मुझे लगता है कि हम ऐसा कुछ कर सकते हैं, बाएं और दाएं मार्जिन को हटाने के लिए:

<div class="row this_row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

और सीएसएस

.this_row {
    margin: 0 -5%;
}

Answer 24

आप बूटस्ट्रैप में 5 कॉलम ग्रिड कैसे जोड़ सकते हैं

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }

@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }

<div class="row">
  <div class="col-sm-1-5">
    <div class="item">Item 1</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 2</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 3</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 4</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 5</div>
  </div>
</div>

Answer 25

सीएसएस को संपादित करने की आवश्यकता के बिना सबसे आसान समाधान होगा:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

और अगर आपको किसी भी ब्रेकपॉइंट से परे तोड़ने की ज़रूरत है, तो बस बीटीएन-ग्रुप ब्लॉक करें। आशा है कि यह किसी की मदद करता है।

Answer 26

पांच कॉलम स्पष्ट रूप से डिजाइन द्वारा बूटस्ट्रैप का हिस्सा नहीं हैं।

लेकिन बूटस्ट्रैप v4 (अल्फा) के साथ, जटिल ग्रिड लेआउट के साथ मदद करने के लिए 2 चीजें हैं

1. फ्लेक्स ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), नया तत्व प्रकार (आधिकारिक - https://www.w3.org/TR/css-flexbox-1/ )
2. उत्तरदायी उपयोगिताएँ ( http://v4-alpha.getbootstrap.com/layout/responsive-utosit/ )

सरल शब्द में, मैं उपयोग कर रहा हूं

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

यह 5,7,9,11,13 या कुछ भी हो, यह ठीक होगा। मुझे पूरा यकीन है कि 12-ग्रिड मानक उपयोग के मामले के 90% से अधिक की सेवा करने में सक्षम है - तो चलो उस तरह से डिजाइन करें - और भी आसान विकसित करें!

अच्छा फ्लेक्स ट्यूटोरियल यहाँ है " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "

Answer 27

मैंने किसी भी संख्या के कॉलम के लिए बूटस्ट्रैप परिभाषाओं के आधार पर SASS मिक्सिन परिभाषाएं बनाई हैं (व्यक्तिगत रूप से 12 के पास मैं 8, 10 और 24 का उपयोग करता हूं):

// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.

@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
    }
    #{$list} {
        position: relative;
        min-height: 1px;
        padding-left:  ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
    }
}


@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
    }
    #{$list} {
        float: left;
    }
}


@mixin calc-extended-grid-column($index, $num-columns, $class, $type) {
    @if ($type == width) and ($index > 0) {
        .col-#{$class}-#{$index}-#{$num-columns} {
            width: percentage(($index / $num-columns));
        }
    }
    @if ($type == push) and ($index > 0) {
        .col-#{$class}-push-#{$index}-#{$num-columns} {
            left: percentage(($index / $num-columns));
        }
    }
    @if ($type == pull) and ($index > 0) {
        .col-#{$class}-pull-#{$index}-#{$num-columns} {
            right: percentage(($index / $num-columns));
        }
    }
    @if ($type == offset) and ($index > 0) {
        .col-#{$class}-offset-#{$index}-#{$num-columns} {
            margin-left: percentage(($index / $num-columns));
        }
    }
}

@mixin loop-extended-grid-columns($num-columns, $class, $type) {
    @for $i from 1 through $num-columns - 1 {
        @include calc-extended-grid-column($i, $num-columns, $class, $type);
    }
}

@mixin make-extended-grid($class, $num-columns) {
    @include float-extended-grid-columns($class, $num-columns);
    @include loop-extended-grid-columns($num-columns, $class, width);
    @include loop-extended-grid-columns($num-columns, $class, pull);
    @include loop-extended-grid-columns($num-columns, $class, push);
    @include loop-extended-grid-columns($num-columns, $class, offset);
}

और आप बस इसके द्वारा कक्षाएं बना सकते हैं:

$possible-number-extended-grid-columns: 8, 10, 24;

@each $num-columns in $possible-number-extended-grid-columns {

  // Columns

  @include make-extended-grid-columns($num-columns);

  // Extra small grid

  @include make-extended-grid(xs, $num-columns);

  // Small grid

  @media (min-width: $screen-sm-min) {
    @include make-extended-grid(sm, $num-columns);
  }

  // Medium grid

  @media (min-width: $screen-md-min) {
    @include make-extended-grid(md, $num-columns);
  }

  // Large grid

  @media (min-width: $screen-lg-min) {
    @include make-extended-grid(lg, $num-columns);
  }

}

मुझे उम्मीद है कि कोई इसे उपयोगी पाएगा

Answer 28

क्या कोई बूटस्ट्रैप-एसएएस (v3) का उपयोग करता है, यहां बूटस्ट्रैप मिश्रणों का उपयोग करते हुए 5 कॉलमों के लिए सरल कोड है:

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

सुनिश्चित करें कि आपने शामिल किया है:

@import "bootstrap/variables";
@import "bootstrap/mixins";

Comments

धन्यवाद, यह वही था जिसकी मुझे तलाश थी, मैंने 1-5 वीं 2-5 वीं आदि की और यहाँ तक कि 3-10 वीं आदि को भी, अब और अधिक लचीलापन, बहुत सुविधाजनक बनाने के लिए

— morksinaanab

Answer 29

बूटस्ट्रैप के लिए 4.4+

एकदम नई row-cols-nकक्षाओं का उपयोग करें ।

1. row-cols-5अपने .rowdiv में क्लास जोड़ें । कोई कस्टम सीएसएस की जरूरत है।
2. पंक्ति-कॉल के लिए यहां देखें 4.4 डॉक: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

बूटस्ट्रैप 4 संस्करण से पहले बूटस्ट्रैप 4.4 के लिए

1. नीचे CSS कॉपी करें (बूटस्ट्रैप लेखकों द्वारा भयानक सीएसएस) और इसे अपनी परियोजना में जोड़ें

2. इसका सही उपयोग करने के लिए ऊपर दिए गए डॉक्स को पढ़ें।

   .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}

Answer 30

.col-xs-2-4 {
  position: relative;
  float: left;
  width: 20%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-sm-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-2-4 {
    float: left;
    width: 20%;
  }
}
.col-md-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .col-md-2-4 {
    float: left;
    width: 20%;
  }
}
.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .col-lg-2-4 {
    float: left;
    width: 20%;
  }
}