4 कॉलम के लिए 2 कॉलम

Question

मैं एक 4 कॉलम तरल पदार्थ से लेआउट:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span3">A</div> 
     <div class="span3">B</div> 
     <div class="span3">C</div> 
     <div class="span3">D</div> 
    </div> 
</div> 

[ A ][ B ][ C ][ D ] 

मोबाइल उपकरणों के लिए, बूटस्ट्रैप कॉलम एक और के तहत एक प्रस्तुत हुई है, जो ठीक काम करता है:

[   A    ] 
[   B    ] 
[   C    ] 
[   D    ] 

लेकिन टैबलेट के लिए, मुझे 2 कॉलम 2:

[  A  ][  B  ] 
[  C  ][  D  ] 

क्या यह संभवतः बूओ के साथ इस व्यवहार को प्राप्त करना संभव है tstrap?

Answer 1

मुझे पता चला कि ज़र्ब फाउंडेशन (http://foundation.zurb.com/docs/grid.php#threeBlockEx) इस fonctionality प्रदान करता है, लेकिन मैं ट्विटर बूटस्ट्रैप के साथ जारी रखना चाहता हूँ। तो मैंने फाउंडेशन का उपयोग करने वाली तकनीक के आधार पर एक कस्टम नियम जोड़ने में कामयाब रहा है:

@media (min-width: 768px) and (max-width: 979px) { 
    .row-fluid > [class*=span]:nth-child(2n+1) { 
     clear: both; 
     margin-left: 0; 
    } 
} 

Answer 2

आपको टैबलेट से संबंधित @media क्वेरी में स्पैन के लिए सीएसएस को ओवरराइड करने की आवश्यकता होगी।

तो तुम कुछ इस तरह की कोशिश कर सकते हैं:

// Tablets & small desktops only 
@media (min-width: 768px) and (max-width: 979px) { 
    [class*=span] { 
    width: 50%; 
    } 
} 

बेशक

, समायोजन किए जाने की आवश्यकता हो सकती है। पैडिंग और मार्जिन की वजह से, चौड़ाई वास्तव में 50% नहीं हो सकती है।

Answer 3

हम्म। मैंने अपने सीएसएस में उन दोनों नियमों की कोशिश की और उनमें से कोई भी मेरे लिए काम नहीं किया। यह एक शर्म की बात है कि यह बीएस 2.0 में गायब है। मुझे उम्मीद है कि वे इसे बीएस 3.0 में जोड़ देंगे!

धन्यवाद,

जेके

Answer 4

एमिली के जवाब देने के लिए जोड़ा जा रहा है आप भी स्तंभों की चौड़ाई रीसेट करने की आवश्यकता,

@media (min-width: 768px) and (max-width: 979px) { 
    .row-fluid > [class*=span]:nth-child(2n+1) { 
     clear: both; 
     margin-left: 0; 
    } 

    .row-fluid .span3 { 
     width: 48.61878453038674%; 
    } 
}