html - tag - open graph facebook example

¿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 al lado del ú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 elegante de manejar líneas nuevas después de cosas como ul o div ? ¿Estoy pasando por alto una configuración general del código que maneja esto?

Answer 1

Al igual que KingCronus mencionado en los comentarios , puede usar la clase de filas para hacer la lista o encabezado en su propia línea. Puede usar la clase de 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 2

Bootstrap 4:

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

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

Answer 3

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

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

Answer 4

Estás usando span6 y span2 . Ambas clases son " float:left ", es decir, si es posible, siempre intentarán sentarse una junto a la otra. Twitter bootstrap se basa en un sistema de 12 rejillas. Por lo general, siempre debe obtener el span**#** para sumar hasta 12.

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

Sin embargo, para forzar un tramo hacia abajo, sin escuchar el flotador anterior, puede usar Twitter bootstraps clase clearfix . Para hacer esto, su código debería verse así:

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

Puede ser la solución podría ser usar una propiedad de relleno.

<div class="well span6" style="padding-top: 50px">
<h3>I wish this appeared on the next line without having to
gratuitously use BR!
</h3>
</div>