Html 如何在twitter引导元素之后换行？

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

以使下一个元素位于换行线上的方式插入换行的正确方法是什么？似乎有些东西会自动执行此操作（例如，``中的

），但我看到了下一个元素可以出现在最后一个元素旁边的行为

HTML:

我希望它出现在下一行，而不必无缘无故地使用BR！

---

在

ul

或

div

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

我相信Twitter引导程序有一个名为

clearfix

的类，您可以使用它来清除浮动

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

您正在使用

span6

和

span2

。这两个类都是“

float:left

”意思是，如果可能的话，它们将始终尝试坐在彼此旁边。 Twitter引导基于12网格系统。因此，您通常应该将

span**#**

相加到12

例如：

span4

+

span4

+

span4

或

span6

+

span6

或

span4

+

span3

+

span5

但是，要强制跨度向下，而不必听前面的浮动，您可以使用twitter引导

clearfix

class。为此，您的代码应如下所示：

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

我希望它出现在下一行，而不必无缘无故地使用BR！

您可以使用类在自己的行中创建列表或标题。您可以在一个或两个元素上使用row类：

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

我希望它出现在下一行，而不必无缘无故地使用BR！

引导程序4：

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

---

来源：

解决方案可能是使用填充属性

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

我希望下一行出现这个，而不必
免费使用BR！

使用

br

元素很好，只要元素之间不需要太多空间，实际上是一件合乎逻辑的事情，因为任何人都可以阅读您的代码并理解您使用的间距逻辑

另一种方法是为空白创建自定义类。在引导程序4中，您可以使用

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

在页面上创建一个空行，但这与使用

标记没有区别。为空白创建自定义类的缺点是，对于查看您的代码的其他人来说，阅读它可能是一件痛苦的事情。自定义类在每次使用时也会应用相同数量的空白，因此如果您希望在同一页上使用不同数量的空白，则需要创建多个空白类

---

在大多数情况下，为了方便和可读，使用

或

更容易。它看起来不漂亮，但很管用。

或者，但是按照同样的思路，您可以使用

行

类。@KingCronus:

行

如果您处于

水平形式

，则不管用。

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