¿Cómo hago una nueva línea después de un elemento de arranque de twitter?

Question

Me disculpo porque esto parece algo tan simple.

¿Cuál es la forma correcta de insertar una línea nueva de forma que el siguiente elemento esté en una nueva línea? Parece que algunas cosas hacen esto automáticamente (como <p> dentro de `), pero estoy viendo un comportamiento donde el siguiente elemento puede aparecer junto al último 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> 

Cuál es la forma correcta o saltos de línea elegante de manejar después de cosas como ul o div? ¿Estoy pasando por alto una configuración general del código que maneja esto?

Answer 1

Estás usando span6 y span2. Ambas clases son "float:left", lo que significa que, si es posible, siempre intentarán sentarse una junto a la otra. Twitter bootstrap se basa en un sistema de 12 rejillas. Así que por lo general siempre se debe obtener la span**#** añadir hasta 12.

ej .: + span4span4span4 + O + span6span6 O span4 + + span3span5.

Para forzar un tramo hacia abajo sin embargo, sin escuchar el flotador anterior puede usar Twitter bootstraps clearfix clase. Para ello, el código debería tener este aspecto:

<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

Creo que Twitter Bootstrap tiene una clase llamada clearfix que puede usar para limpiar el flotante.

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

Answer 3

Como KingCronus mentioned in the comments puede utilizar la clase row para hacer la lista o de la partida en su propia línea. Se podría utilizar la clase fila en uno o ambos elementos:

<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> 

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