html - 如何在 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 bootstrap 基于 12 格系统。因此，您通常应该总是让 span**#** 加起来等于 12。

例如:span4 + span4 + span4 或 span6 + span6 或span4 + span3 + span5。

不过，要强制缩小跨度，无需监听之前的 float ，您可以使用 twitter Bootstrap 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>