我很抱歉，因为这看起来很简单。
以使下一个元素位于换行符上的方式插入换行符的正确方法是什么？似乎有些东西会自动做到这一点（例如`中的<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之后的换行符的正确或优雅的方法是什么？我是否忽略了处理此问题的代码的一般设置？
您使用的是span6和span2。这两个类都是"float:left"，意思是，如果可能的话，它们会一直坐在一起。Twitter引导程序基于12网格系统。所以你通常应该得到span**#**加起来是12。
例如：span4+span4+span4或span6+span6或span4+span3+span5。
不过，要强制降低跨度，不必听上一个float，您可以使用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>
我相信Twitter Bootstrap有一个名为clearfix的类，您可以使用它来清除浮动。
<ul class="nav nav-tabs span2 clearfix">
就像评论中提到的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>
引导程序4:
<div class="w-100"></div>
来源：https://v4-alpha.getbootstrap.com/layout/grid/#equal-宽度多行
使用br元素是可以的，只要元素之间不需要很大的空间，这实际上是一件合乎逻辑的事情，因为任何人都可以阅读您的代码并了解您使用的间距逻辑。
另一种选择是为空白创建一个自定义类。在引导程序4中，您可以使用
<div class="w-100"></div>
在页面上创建一个空白行，但这与使用<br>标记没有什么不同。为空白创建自定义类的缺点是，对于其他查看您代码的人来说，阅读它可能会很痛苦。自定义类每次使用时也会应用相同数量的空白，因此，如果您希望在同一页面上使用不同数量的空白空间，则需要创建多个空白类。
在大多数情况下，为了方便和可读性，使用<br>或<div class="w-100"></div>更容易。它看起来不漂亮，但很管用。
可能是解决方案，可以使用padding属性。
<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>