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

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 + span4或span6 + span6 OR 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 mentioned in the comments可以使用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> 

Answer 4

引导4：

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

来源：https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row