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或span4 + span3 + {{1 }}

虽然要强制跨度，但不听前一个浮点数，你可以使用twitter bootstraps span5类。为此，您的代码应如下所示：

clearfix

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

Bootstrap 4：

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

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

Answer 5

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

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

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

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

在大多数情况下，使用<br>或<div class="w-100"></div>更为简便，以便于阅读。它看起来不漂亮，但是可以用。

Answer 6

解决方案可能是使用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>

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

6 个答案: