2012-10-08 9 views
5

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

उत्तर

12

सब पर बाईं बॉर्डर बनाएं, लेकिन पहले कॉलम:

.well [class^="span"] + [class^="span"] { 
    margin-left: -1px; /* compensate border width */ 
    border-left: 1px solid #e3e3e3; 
} 

वैकल्पिक रूप से, सीएसएस कॉलम इस्तेमाल किया जा सकता (उपसर्गों आवश्यक):

.well.col { 
    columns: 2; 
    column-gap: 20px; 
    column-rule: 1px solid #e3e3e3; 
} 

आप इसका इस्तेमाल नहीं किया है इससे पहले, आपको मेरी tutorial on CSS columns जांचनी चाहिए।

+0

यह मेरे लिए लेआउट ब्रेक करता है –

+0

मेरा मानना ​​है कि यह टूट जाता है क्योंकि सीमा जोड़ना चौड़ाई की एक छोटी मात्रा जोड़ता है, अगर आपके पास पहले पृष्ठ की पूरी चौड़ाई उठाने वाले तत्व थे, तो 1px भी इसे बहुत दूर दबाएगा और –

0

आप हमेशा एक HTML <hr> टैग का उपयोग कर सकते हैं।

+5

लगता है


क्षैतिज रेखा के लिए है, मैं एक लंबवत रेखा कैसे बना सकता हूं? – waitingkuo

+1

जब तक आप केवल एक पंक्ति लेआउट को लागू नहीं कर रहे हैं-


का आकार बड़ा करना संभव है लेकिन चौड़ाई बहुत छोटी है, परिणाम एक लंबवत रेखा है: <घंटा चौड़ाई = "1" आकार = "500"> – LucianNovo

+0

संभव हो सकता है, लेकिन निश्चित रूप से अमान्य है। – Dementic

2

चयनित उत्तर तोड़ते हैं यदि आपके तत्व पूरी चौड़ाई लेते हैं क्योंकि सीमा 1px बहुत अधिक जोड़ती है! इसका मुकाबला करने के लिए आप सीमा के लिए मार्जिन को समायोजित कर सकते हैं।

.line-right { 
    margin-right: -1px; 
    border-right: 1px solid black; 
} 

यदि आप एक बड़ी सीमा चाहते हैं, तो बस मार्जिन में इसके लिए जिम्मेदार रहें!

+0

नीचे कुछ उछाल देगा @PavloMykhalov मैं इसका भी परीक्षण करूंगा, किसी कारण से मार्जिन-बाएं बदलते समय यह हमेशा काम नहीं कर रहा था। यह पैडिंग या मार्जिन बूटस्ट्रैप्स कक्षाओं से संबंधित हो सकता है स्वचालित रूप से –

+0

जोड़ें आप सही हैं। मुझे इसे दोबारा जांचना चाहिए। – Pavlo

संबंधित मुद्दे