Html 如何在 twitter bootstrap 元素后换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11500764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a newline after a twitter bootstrap element?
提问by Danny
I apologize because this seems like such a simple thing.
我很抱歉，因为这似乎是一件很简单的事情。
What's the correct way to insert a newline in a way that the next element is on a newline? It seems like some things automatically do this (such as <p>within `) but I'm seeing behavior where the next element can appear right next to the last element.
以下一个元素在换行符上的方式插入换行符的正确方法是什么？似乎有些事情会自动执行此操作（例如<p>在` 内），但我看到下一个元素可以出现在最后一个元素旁边的行为。
HTML:
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>
What is the correct or elegant way to handle newlines after things like ulor div? Am I overlooking a general setup of the code that handles this?
在诸如ul或 之类的事情之后处理换行符的正确或优雅的方法是div什么？我是否忽略了处理此问题的代码的一般设置？
回答by Alexander Wigmore
You're using span6and span2. Both of these classes are "float:left" meaning, if possible they will always try to sit next to each other.
Twitter bootstrap is based on a 12 grid system. So you should generally always get the span**#**to add up to 12.
您正在使用span6和span2。这两个班级都是“ float:left”的意思，如果可能的话，他们总是会尽量坐在一起。Twitter bootstrap 基于 12 个网格系统。所以你通常应该总是得到span**#**加起来为 12。
E.g.: span4+ span4+ span4OR span6+ span6OR span4+ span3+ span5.
例如： span4+ span4+span4或span6+span6或span4+ span3+ span5。
To force a span down though, without listening to the previous float you can use twitter bootstraps clearfixclass. To do this, your code should look like this:
但是，要强制降低跨度，而无需收听先前的浮动，您可以使用 twitter bootstrapsclearfix类。为此，您的代码应如下所示：
<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>
回答by Christofer Eliasson
I believe Twitter Bootstrap has a class called clearfixthat you can use to clear the floating.
我相信 Twitter Bootstrap 有一个名为的类clearfix，您可以使用它来清除浮动。
<ul class="nav nav-tabs span2 clearfix">
回答by WhiteKnight
Like KingCronus mentioned in the commentsyou can use the rowclass to make the list or heading on its own line. You could use the row class on either or both elements:
就像评论中提到的 KingCronus一样，您可以使用row类在自己的行上制作列表或标题。您可以在一个或两个元素上使用 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>
回答by MixerOID
Bootstrap 4:
引导程序 4：
<div class="w-100"></div>
Source: https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row
来源：https: //v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row
回答by to240
Using brelements is fine, and as long as you don't need a lot of space between elements, is actually a logical thing to do as anyone can read your code and understand what spacing logic you are using.
使用br元素很好，只要元素之间不需要太多空间，这实际上是一件合乎逻辑的事情，因为任何人都可以阅读您的代码并了解您使用的间距逻辑。
The alternative is to create a custom class for white space. In bootstrap 4 you can use
另一种方法是为空白创建一个自定义类。在引导程序 4 中，您可以使用
<div class="w-100"></div>
to make a blank row across the page, but this is no different to using the <br>tag. The downside to creating a custom class for white space is that it can be a pain to read for others who view your code. A custom class would also apply the same amount of white space each time you used it, so if you wanted different amounts of white space on the same page, then you would need to create several white space classes.
在页面上创建一个空白行，但这与使用<br>标签没有什么不同。为空白创建自定义类的缺点是，对于查看您代码的其他人来说，阅读起来可能会很痛苦。自定义类在您每次使用时也会应用相同数量的空白，因此如果您希望在同一页面上使用不同数量的空白，则需要创建多个空白类。
In most cases, it is just easier to use <br>or <div class="w-100"></div>for the sake of ease and readability. it doesn't look pretty, but it works.
在大多数情况下，它只是更易于使用<br>或<div class="w-100"></div>为了易用性和可读性。它看起来不漂亮，但它有效。
回答by Fabrizzio
May be the solution could be use a padding property.
可能的解决方案是使用填充属性。
<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>
