35

我很抱歉，因为这似乎是一件很简单的事情。

以下一个元素在换行符上的方式插入换行符的正确方法是什么？似乎有些事情会自动执行此操作（例如<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>

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

4

6 回答 6

54

您正在使用span6和span2。这两个班级都是“ float:left”的意思，如果可能的话，他们会总是尝试坐在彼此旁边。Twitter bootstrap 基于 12 格系统。所以你通常应该总是得到span**#**12。

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

clearfix但是，要强制缩小跨度，您可以使用 twitter bootstraps类，而无需收听先前的浮动。为此，您的代码应如下所示：

<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>
于 2012-07-16T08:54:12.403 回答
14

我相信 Twitter Bootstrap 有一个名为的类clearfix，您可以使用它来清除浮动。

<ul class="nav nav-tabs span2 clearfix">
于 2012-07-16T08:44:12.307 回答
5

就像评论中提到的 KingCronus一样，您可以使用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>
于 2013-09-30T11:20:19.273 回答
4

引导程序 4：

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

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

于 2017-08-23T11:18:33.473 回答
2

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

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

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

在页面上创建一个空白行，但这与使用<br>标签没有什么不同。为空白创建自定义类的缺点是，对于查看您的代码的其他人来说阅读起来可能会很痛苦。自定义类在您每次使用时也会应用相同数量的空白，因此如果您希望在同一页面上使用不同数量的空白，则需要创建多个空白类。

在大多数情况下，它只是更容易使用<br>或<div class="w-100"></div>为了方便和可读性。它看起来不漂亮，但它有效。

于 2019-04-17T16:08:22.827 回答
0

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

<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>
于 2018-06-27T02:27:24.733 回答