I apologize because this seems like such a simple thing.
What's the correct way to insert a newline in a way that the next element is on a newline? It seems like some things automatically do this (such as <p>
within `) but I'm seeing behavior where the next element can appear right next to the last element.
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>
What is the correct or elegant way to handle newlines after things like ul
or div
? Am I overlooking a general setup of the code that handles this?
You're using span6
and span2
. Both of these classes are "float:left
" meaning, if possible they will always try to sit next to each other.
Twitter bootstrap is based on a 12 grid system. So you should generally always get the span**#**
to add up to 12.
E.g.: span4
+ span4
+ span4
OR span6
+ span6
OR span4
+ span3
+ span5
.
To force a span down though, without listening to the previous float you can use twitter bootstraps clearfix
class. To do this, your code should look like this:
<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>