如何在twitter bootstrap元素后创建换行符？

Question

我道歉,因为这看起来很简单.

以下一个元素在换行符上的方式插入换行符的正确方法是什么？似乎有些东西会自动执行此操作(例如<p>在`内),但我看到下一个元素可以出现在最后一个元素旁边的行为.

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>

什么是处理之类的东西后换行正确或优雅的方式ul还是div？我是否忽略了处理此问题的代码的一般设置？

Answer 1

你正在使用span6和span2.这两个类都是" float:left"意思,如果可能的话,他们总会试着坐在一起.Twitter引导程序基于12网格系统.因此,您通常应该总是得到span**#**最多12个.

例如: span4+ span4+ span4OR span6+ span6OR span4+ span3+ span5.

要强制跨度,但不要听前面的浮点数,你可以使用twitter bootstraps clearfix类.为此,您的代码应如下所示:

<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

我相信Twitter Bootstrap有一个叫做的类clearfix,可以用来清除浮动.

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

Answer 3

与评论中提到的KingCronus一样,您可以使用行类来创建列表或标题.您可以在其中一个或两个元素上使用行类:

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