5 1 पंक्ति में समान Spans - ट्विटर बूटस्ट्रैप

Question

द्रव ग्रिड लेआउट का उपयोग करके मैं 4 बराबर फैला मिलती है:

<div class="row-fluid"> 
    <div class="span3">...</div> 
    <div class="span3">...</div> 
    <div class="span3">...</div> 
    <div class="span3">...</div> 
</div> 

या मैं 6 बराबर फैला प्राप्त कर सकते हैं:

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

लेकिन यह कैसे मैं करता हूँ 5 बराबर स्पैन प्राप्त करें?

Answer 1

ध्यान में रखते हुए कि डिफ़ॉल्ट बूटस्ट्रैप 12 कॉलम है, तो आप गणितीय रूप से 5 बराबर स्पैन नहीं प्राप्त कर सकते हैं।

हालांकि, अगर आपको वास्तव में (खराब विचार, उस पर एक सेकंड में अधिक) की आवश्यकता है, तो आप 15 कॉलम रखने के लिए अपने बूटस्ट्रैप डाउनलोड को कस्टमाइज़ कर सकते हैं।

http://twitter.github.com/bootstrap/customize.html

बदलें से 15 @gridColumns चर और फिर 5 सभी स्तंभों एक span3 साथ उपयोग करें।

हालांकि यह एक बुरा विचार है। बूटस्ट्रैप 12 कॉलम है क्योंकि 12 अच्छी तरह से काम करता है। 12 का उपयोग करके आप 1/4, 1/3, और 1/2 चौड़ाई कॉलम के लिए समर्थन देते हैं। 15 कॉलम लेआउट के साथ, आपको केवल 1/3 चौड़ाई (और बहुत सारे अजीब अन्य आकार) के लिए समर्थन मिलेगा। हालांकि आपका कॉल, सेटिंग वहां है।

Answer 2

ठीक है, यह गणित है। असली सीएसएस/बूटस्ट्रैप समस्या नहीं ...

आप पंक्ति के भीतर 5 बराबर स्पैन बनाने में सक्षम नहीं होंगे क्योंकि बूटस्ट्रैप के डिफ़ॉल्ट ग्रिड कॉलम 12, और 12/5 = 2.4 हैं।

Answer 3

आपको generate कस्टम ग्रिड (उदा। 10) की आवश्यकता है। 12 कॉलम ग्रिड

Answer 4

में 5 बराबर कच्चे बनाने का कोई तरीका नहीं है, मैं इसे span10 की द्रव पंक्ति बनाकर और span2 बच्चों के साथ बाल द्रव पंक्तियों के द्वारा 10/2 = 5 समस्या में परिवर्तित कर देता। निम्नलिखित कार्य:

<div class="container-fluid"> 
    <div class="row-fluid span10"> 
      <div class="row-fluid"> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
      </div> 
    </div> 
    <div class="row-fluid span10"> 
      <div class="row-fluid"> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
      </div> 
    </div> 
</div> <!-- /container --> 

Answer 5

मैंने चौड़ाई की गणना के लिए बूटस्ट्रैप्स विधियों का पालन किया है और निम्नलिखित के साथ आ गया है। आप HTML संरचना का पालन करने के लिए की इस प्रकार चाहते हैं:

<div class="row-fluid-5"> 
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div> 
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div> 
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div> 
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div> 
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div> 
</div> 

उसके बाद, आप bootstrap.css और बूटस्ट्रैप-responsive.css लोड के बाद, निम्नलिखित के साथ अपने custom.css फ़ाइल लोड:

/* CUSTOM 5 COLUMN SPAN LAYOUT 
    * 
    * based on http://gridcalculator.dk/ 
    * width => 1200, gutter => 15px, margin => 15px, columns => 5 
    */ 
.row-fluid-5 { 
    width: 100%; 
    *zoom: 1; 
} 
.row-fluid-5:before, 
.row-fluid-5:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
} 
.row-fluid-5:after { 
    clear: both; 
} 
.row-fluid-5 [class*="span"] { 
    display: block; 
    float: left; 
    width: 100%; 
    min-height: 30px; 
    margin-left: 1.875%; 
    *margin-left: 1.875%; 

    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

.row-fluid-5 .controls-row [class*="span"] + [class*="span"] { 

    margin-left: 1.875%; 
} 
.row-fluid-5 [class*="span"]:first-child{ 
    margin-left: 0; 
} 
.row-fluid-5 .span2 { 
    width: 18.5%; 
    *width: 18.5%; 
} 

/* responsive ONLY */ 

@media (max-width: 600px){ /* spans reduce to 100px then go full width */ 

    .row-fluid-5 [class*="span"]{ 
    margin-left: 0; 
    float: left; 
    width: 100%; 
    padding: 10px; 
    } 
} 

यह देखने के लिए नीचे डेमो देखें कि यह कैसे काम करता है।

DEMO

Answer 6

सिर्फ तालिकाओं का उपयोग नहीं क्यों।यह मैं क्या उपयोग है और तत्व की अपनी उत्तरदायी

<div class="row-fluid"> 
    <div class="span12"> 
    <table class="table"> 
    <tbody> 
    <tr> 
     <td width="20%">1</td> 
     <td width="20%">2</td> 
     <td width="20%">3</td> 
     <td width="20%">4</td> 
     <td width="20%">5</td> 
    </tr> 
    </tbody> 
    </table> 

</div> 
</div> 

Answer 7

.span3 { width: 220px; } 
.span2 { width: 140px; } 

या

.row-fluid .span3 { width: 23.404255319148934%; *width: 
23.351063829787233%; } 

.row-fluid .span2 { width: 14.893617021276595%; *width: 
14.840425531914894%; } 

उन केवल प्रदान की जाती हैं चौड़ाई, तो आप बस

class="span" style="width:180px" 

या

जोड़ने के लिए सक्षम होना चाहिए

class="span" style="width:19.1488%" 

आपको कक्षा अवधि जोड़ने की आवश्यकता है बूटस्ट्रैप को .row कार्यों के लिए आवश्यक है।

Answer 8

या आप इसे अपने सीएसएस (या bootstrap.css) में जोड़ सकते हैं - यह हल करने का मेरा पसंदीदा तरीका है। "15" मुझे थोड़ा फेंकने के लिए प्रयोग किया जाता था, लेकिन बस खुद को याद दिलाने की कोशिश करें कि यह 1/5 वां है।

.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; 
    } 
} 

फिर बस इसे किसी भी अन्य बूटस्ट्रैप वर्ग की तरह उपयोग करें।

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