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




div class clearfix bootstrap (4)

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 facciano automaticamente questo (come <p> entro `) ma sto vedendo un comportamento in cui il prossimo elemento 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 i newline dopo cose come ul o div ? Sto trascurando una configurazione generale del codice che gestisce questo?



Come KingCronus menzionato nei commenti, è possibile utilizzare la classe di riga per creare l'elenco o l'intestazione sulla propria riga. È possibile utilizzare la classe di riga su uno 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>

Potrebbe essere la soluzione potrebbe essere utilizzare una proprietà 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>

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 griglia. Quindi, in genere dovresti sempre ottenere l' span**#** da aggiungere fino a 12.

Ad es .: span4 + span4 + span4 OR span6 + span6 O span4 + span3 + span5 .

Tuttavia, per forzare lo span verso il basso, senza ascoltare il float precedente, è possibile utilizzare la classe clearfix bootstrap di Twitter. Per fare questo, il tuo codice dovrebbe apparire così:

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




clearfix