如何在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