Jak utworzyć nowy wiersz po elemencie bootstrap twitter?

Question

Przepraszam, ponieważ wydaje się to prostą rzeczą.

Jaki jest poprawny sposób wstawienia znaku nowej linii w taki sposób, aby następny element znajdował się na linii nowej linii? Wygląda na to, że niektóre rzeczy automatycznie to robią (np. <p> w `), ale widzę zachowanie, w którym następny element może pojawić się tuż obok ostatniego elementu.

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> 

Jaka jest prawidłowa lub elegancki sposób do obsługi nowej linii po takich ul lub div? Czy nie widzę ogólnych ustawień kodu, który to obsługuje?

Answer 1

Używasz span6 i span2. Obie te klasy są "float:left", co oznacza, że ​​jeśli to możliwe, zawsze będą próbować siedzieć obok siebie. Twitter bootstrap oparty jest na systemie 12-gridowym. Więc powinny generalnie zawsze uzyskać span**#** dodać do 12.

np .: span4 + span4 + span4 LUB span6 + span6 LUB span4 + span3 + span5.

Aby wymusić rozpiętość, nie słuchając poprzedniego float, możesz użyć klasy Twittera: clearfix. Aby to zrobić, Twój kod powinien wyglądać następująco:

<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

Wierzę, że Twitter Bootstrap ma klasę o nazwie clearfix, której można użyć do wyczyszczenia pływającego.

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

Answer 3

Jak KingCronus mentioned in the comments można użyć klasy row zrobić listę lub pozycji w oddzielnym wierszu. Można użyć klasy rzędzie na jednej lub obu elementów:

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

Źródło: https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row