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 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="col-md-2 col-md-offset-2"。像<div class="col-md-offset-2"></div>那样只有一个偏移的空div没有多大意义，因为它渲染时对布局没有影响。

Answer 2

因为您无法在开始代码中使用/结束div，所以必须以</div>结束

这些都没有在您期望的那一点<div class="col-md-offset-2"/>结束，而是在浏览器决定必须保持DOM不被破坏的地方......

请参阅小提琴：http://jsfiddle.net/DrCord/8sq9cb7s/

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

2 个答案: