Jak utworzyć nową linię po elemencie Bootstrap na Twitterze?

Przepraszam, bo to takie proste.

Jaki jest prawidłowy sposób wstawiania nowej linii w taki sposób, że następny element znajduje się w nowej linii? Wygląda na to, że niektóre rzeczy robią to automatycznie (np. <p> within`), 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>

Jaki jest poprawny lub elegancki sposób obsługi nowych linii po takich rzeczach jak ul lub div? Czy przeoczyłem ogólną konfigurację kod, który się tym zajmuje?

Author: Danny, 2012-07-16
Source

5 answers

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 jest oparty na systemie siatki 12. Więc generalnie zawsze należy dodać span**#** do 12.

E. g.: span4 + span4 + span4 lub span6 + span6 lub span4 + span3 + span5.

Aby wymusić span w dół, bez słuchania poprzedniego float możesz użyć klasy twitter bootstraps clearfix. Aby to zrobić, twój kod powinien wygląda tak: 

<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>
 51
Author: Alexander Wigmore,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-01 19:56:35

Uważam, że Twitter Bootstrap ma klasę o nazwie clearfix, której możesz użyć do wyczyszczenia floatingu.

<ul class="nav nav-tabs span2 clearfix">
 13
Author: Christofer Eliasson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-16 08:44:12

Podobnie jak KingCronus wspomniany w komentarzach możesz użyć klasy row, aby utworzyć listę lub nagłówek w swojej własnej linii. Możesz użyć klasy row na jednym lub obu elementach: 

<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>
 5
Author: WhiteKnight,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:28

Bootstrap 4: 

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

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

 2
Author: MixerOID,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-23 11:18:33

Może być rozwiązaniem może być użycie właściwości padding.

<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>
 0
Author: Fabrizzio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-27 02:27:24