Come posso creare una nuova riga dopo un elemento di bootstrap di Twitter?

Question

Mi scuso perché sembra una cosa così semplice.

Qual è il modo corretto di inserire una nuova riga in modo che l'elemento successivo sia su una nuova riga? Sembra che alcune cose lo facciano automaticamente (come <p> all'interno di `) ma sto vedendo un comportamento in cui l'elemento successivo può apparire proprio accanto all'ultimo elemento.

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> 

Qual è il modo corretto o elegante per gestire le nuove righe dopo le cose come ul o div? Sto trascurando una configurazione generale del codice che gestisce questo?

Answer 1

Stai usando span6 e span2. Entrambe queste classi sono "float:left", nel senso che, se possibile, cercheranno sempre di sedersi l'una accanto all'altra. Il bootstrap di Twitter si basa su un sistema a 12 caselle. Così si dovrebbe generalmente sempre ottenere il span**#** di aggiungere fino a 12.

Es .: span4 + span4 + span4 O span6 + span6 O span4 + span3 + span5.

Per forzare lo span verso il basso, senza ascoltare il float precedente, è possibile utilizzare la classe clearfix di bootstrap di Twitter. Per fare questo, il codice dovrebbe essere simile a questo:

<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

Credo che Twitter Bootstrap abbia una classe chiamata clearfix che è possibile utilizzare per cancellare il floating.

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

Answer 3

Come KingCronus mentioned in the comments è possibile utilizzare la classe row a fare l'elenco o voce sulla propria riga. È possibile utilizzare la classe di fila su entrambi o entrambi gli elementi:

<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

Bootstrap 4:

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

Fonte: https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row