如何使用 Bootstrap Twitter 的容器和行创建第二行？

Question

我查看了 Bootstrap's documentation on the matter 并尝试了他们的东西的不同变体，比如使用容器而不是容器流体，但我还没有成功。我只是想制作两行文本。以下显示在一行中，我不明白为什么。它似乎应该显示两个不同的行，但事实并非如此。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Rows</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2"/>
        <div class="col-md-2"><p>Apple1</p></div>
        <div class="col-md-2"><p>Apple2</p></div>
        <div class="col-md-2"><p>Apple3</p></div>
    </div>
    <div class="row">
        <div class="col-md-offset-2"/>
        <div class="col-md-2"><p>Apple4</p></div>
        <div class="col-md-2"><p>Apple5</p></div>
        <div class="col-md-2"><p>Apple6</p></div>
    </div>
</div>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

我想要的输出是这样的：

        Apple1    Apple2    Apple3

        Apple4    Apple5    Apple6

有谁知道为什么这一切都排成一行？

Answer 1

因为您不能在开始标记中以 / 结束 div，所以您必须以 </div>

结束它

这些没有结束 <div class="col-md-offset-2"/> 在你期望它们结束的时候，而是浏览器决定它们必须结束的地方，以防止 DOM 被破坏...

参见 fiddle : http://jsfiddle.net/DrCord/8sq9cb7s/

Answer 2

我相信这就是您想要的：

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-2"><p>Apple1</p></div>
        <div class="col-md-1"></div>
        <div class="col-md-2"><p>Apple2</p></div>
        <div class="col-md-1"></div>
        <div class="col-md-2"><p>Apple3</p></div>
        <div class="col-md-2"></div>
    </div>
    <div class="row">
        <div class="col-md-2 col-md-offset-2"><p>Apple4</p></div>
        <div class="col-md-1"></div>
        <div class="col-md-2"><p>Apple5</p></div>
        <div class="col-md-1"></div>
        <div class="col-md-2"><p>Apple6</p></div>
        <div class="col-md-2"></div>
    </div>
</div>

bootply example

偏移量应与网格class一起使用，如class="col-md-2 col-md-offset-2"。空的 div 只有一个偏移量，例如 <div class="col-md-offset-2"></div> 没有多大意义，因为它呈现时对布局没有影响。

如何使用 Bootstrap Twitter 的容器和行创建第二行？

How do I make a second row using Bootstrap Twitter's container and rows?

html

rows

twitter-bootstrap