ट्विटर बूटस्ट्रैप गटर में एक लंबवत रेखा डालने का सबसे अच्छा तरीका

Question

<div class="row-fluid"> 

    <div class="span6"> Some content </div> 

    <div class="span6"> Some content </div> 

</div> 

मैं इन दो स्तंभों के बीच गटर के बीच एक लंबवत रेखा डालना चाहता हूं।

लाइन कॉलम की पूरी लंबाई नहीं है - इसलिए मैं केवल सीमा का उपयोग नहीं कर सकता।

मैंने span6, span1, span5 में अपना लेआउट बदलने और लाइन के लिए span1 कॉलम का उपयोग करने का प्रयास किया है, लेकिन यह मेरी सही सामग्री के लिए जगह को गड़बड़ कर देता है।

कोई विचार?

Answer 1

यदि आप इस धारणा के साथ जा सकते हैं कि एक आधुनिक ब्राउज़र (जो सीएसएस 3 का समर्थन करता है) का उपयोग किया जा रहा है, तो आप डिफ़ॉल्ट बूटस्ट्रैप .span6 को ओवरराइड करने के लिए बॉक्स आकार देने वाली संपत्ति (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) का उपयोग कर सकते हैं।

तुम भी एक @media क्वेरी अजीब बाईं ओर रिक्ति जब ब्राउज़र एक छोटे चौड़ाई का आकार बदलकर से बचने के लिए इस संलग्न कर सकते हैं ..

@media (min-width:979px) { 
    .span6:not(:first-child) { 
    border-left: 1px solid #ddd; 
    padding-left: 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    } 
} 

Bootply

Answer 2

के लिए धन्यवाद जवाब। लेकिन समस्या सिर्फ एक सीमा नहीं थी। ऊर्ध्वाधर रेखा कॉलम की लंबाई के केवल एक भाग के लिए होना चाहिए।

मेरे समाधान मैं अवधि स्तंभ की स्थिति छोड़ना पड़ा खड़ी रेखा div & के लिए पूर्ण स्थिति का इस्तेमाल किया गया:

<div class="row-fluid"> 

    <div class="span6"> Some content </div> 

    <div class="span6" style="position:relative"> 
     <div class="thin_vertical_line" style="position:absolute;left:-15px;height:70%;top:0px;></div> 
     Some content 
    </div> 

</div> 

केवल शेष मुद्दा यह है कि -15px बाईं एक गटर चौड़ाई (मान लिया गया है चहचहाना बूटस्ट्रैप प्रतिक्रिया संकेतक बूटस्ट्रैप के साथ एक निश्चित आयाम & के साथ गटर प्राप्त करने के लिए दूसरे अवधि पर बाएं मार्जिन डालता है, यह स्क्रीन रिज़ॉल्यूशन के आधार पर बदल सकता है। -15 पीएक्स सुरक्षित है लेकिन छोटे उपकरणों पर काफी केंद्रित नहीं होगा।