ट्विटर बूटस्ट्रैप तत्व के बाद मैं एक नई लाइन कैसे बना सकता हूं?

Question

मैं क्षमा चाहता हूं क्योंकि यह ऐसी साधारण चीज़ की तरह लगता है।

अगली तत्व एक नई लाइन पर है कि एक नई लाइन डालने का सही तरीका क्या है? ऐसा लगता है कि कुछ चीजें स्वचालित रूप से ऐसा करती हैं (जैसे <p> `के भीतर) लेकिन मैं व्यवहार देख रहा हूं जहां अगला तत्व अंतिम तत्व के बगल में दिखाई दे सकता है।

HTML:

<ul class="nav nav-tabs span2"> 
    <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li> 
    <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li> 
    <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li> 
    <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li> 
</ul> 
<BR /> <!-- It seems dumb to need this! Is this really how --> 
<BR /> <!-- to get a newline? --> 
<BR /> <!-- Well, it's what --> 
<BR /> <!-- I'm doing now, I suppose... --> 
<BR /> 

<div class="well span6"> 
    <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3> 
</div> 

ul या div जैसी चीजों के बाद नई-पंक्तियों को संभालने के लिए सही है या सुरुचिपूर्ण तरीका क्या है? क्या मैं कोड का एक सामान्य सेटअप देख रहा हूं जो इसे संभालता है?

Answer 1

आप span6 और span2 उपयोग कर रहे हैं। इन दोनों कक्षाओं में "float:left" अर्थ है, यदि संभव हो तो वे हमेशा एक दूसरे के बगल में बैठने की कोशिश करेंगे। ट्विटर बूटस्ट्रैप 12 ग्रिड सिस्टम पर आधारित है। तो अगर आप आम तौर पर हमेशा 12.

उदा .: span4 + span4 + span4 या span6 + span6 या span4 + span3 + span5 को जोड़ने के लिए span**#** मिलना चाहिए।

हालांकि, पिछली फ्लोट को सुनने के बिना, एक अवधि को मजबूर करने के लिए आप ट्विटर बूटस्ट्रैप्स clearfix कक्षा का उपयोग कर सकते हैं। ऐसा करने के लिए, अपने कोड इस तरह दिखना चाहिए:

<ul class="nav nav-tabs span2"> 
    <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li> 
    <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li> 
    <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li> 
    <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li> 
</ul> 
<!-- Notice this following line --> 
<div class="clearfix"></div> 
<div class="well span6"> 
    <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3> 
</div> 

Answer 2

मेरा मानना ​​है कि ट्विटर बूटस्ट्रैप में clearfix नामक एक कक्षा है जिसे आप फ़्लोटिंग को साफ़ करने के लिए उपयोग कर सकते हैं।

<ul class="nav nav-tabs span2 clearfix"> 

Answer 3

KingCronus mentioned in the comments जैसा आप सूची या अपनी पंक्ति में शीर्षक बनाने के लिए row वर्ग का उपयोग कर सकते हैं।

<ul class="nav nav-tabs span2 row"> 
    <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li> 
    <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li> 
    <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li> 
    <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li> 
</ul> 

<div class="well span6 row"> 
    <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3> 
</div> 

Answer 4

बूटस्ट्रैप: 4:

<div class="w-100"></div> 

स्रोत: https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row