बूटस्ट्रैप: स्तंभों में लंबवत ऑफ़सेट कैसे जोड़ें?

Question

बूटस्ट्रैप कॉलम के बीच रिक्त स्थान जोड़ने के लिए कक्षा col-sm-offset-* प्रदान करता है। यह लैपटॉप स्क्रीन पर ठीक काम कर रहा है लेकिन जब हम स्क्रीन रिज़ॉल्यूशन को मोबाइल पर बदलते हैं तो यह कॉलम को अंतरिक्ष के बिना किसी एक के नीचे व्यवस्थित करता है।

क्या बूटस्ट्रैप lib में कोई कक्षा है जिसका उपयोग हम अपेक्षित परिणाम प्राप्त कर सकते हैं।

Refer fiddle

वर्तमान उत्पादन,

अपेक्षित परिणाम,

Answer 1

आप उस विशेष div को अतिरिक्त कक्षा (कोई नाम) जोड़ सकते हैं और इसे दिए गए सीएसएस का उपयोग कर सकते हैं।

.custom{ 
 
    margin-bottom:10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavender;">col-1</div> 
 
    <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavenderblush;">col-2</div> 
 
    <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavender;">col-3</div> 
 
    <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavenderblush;">col-4</div> 
 
</div> 
 
</div>

Answer 2

इस

.col-sm-offset-1{ 
 
    margin-top: 1em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-sm-2 col-sm-offset-1" style="background-color:lavender;">col-1</div> 
 
    <div class="col-sm-2 col-sm-offset-1" style="background-color:lavenderblush;">col-2</div> 
 
    <div class="col-sm-2 col-sm-offset-1" style="background-color:lavender;">col-3</div> 
 
    <div class="col-sm-2 col-sm-offset-1" style="background-color:lavenderblush;">col-4</div> 
 
</div> 
 
</div>

तरह की कोशिश

Answer 3

एक छोटी सी देर लेकिन कुछ समय पहले मैं इस भर में आया था:

https://gist.github.com/erobert17/9139147

जो खड़ी ऑफसेट के लिए एक सास शैलियों है:

@for $i from 0 through 12 { 
    .vert-offset-top-#{$i} { 
    margin-top: #{$i}em; 
    } 

    .vert-offset-bottom-#{$i} { 
    margin-bottom: #{$i}em; 
    } 
} 

यह बहुत अच्छी तरह से काम किया है मेरे लिए :)