css - Bootstrap3 列间距

Question

我是这个社区的新人，也是一个非常新的编码员。

我想在这两列之间设置一个空格，我尝试了一些代码但没有成功...

这是我做的:

<div class="container">
    <div class="main row">
        <div class="col-md-3">
            <div class="col-md-12">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et excepturi eligendi tempore consequuntur voluptas obcaecati dignissimos culpa deserunt aspernatur, ipsa veritatis alias labore laboriosam commodi, quasi fuga quo ab, neque sunt odio voluptatibus nisi? In cupiditate dignissimos est nostrum itaque excepturi, amet aspernatur, atque, quam quasi dolore enim, illo natus tempora explicabo. Soluta quibusdam in exercitationem hic veniam alias, dolores error possimus, quidem, sequi ea tenetur repellendus, doloribus delectus necessitatibus dolorem. Quibusdam atque quae explicabo impedit aperiam repudiandae laborum iure, consequuntur ipsum eaque dolore saepe nam in. Maxime aliquid possimus reprehenderit cumque illum mollitia quos. Placeat quasi eveniet, expedita ex!
                </p>
            </div>
        </div>

        <div class="col-md-9">
            <div class="col-md-12">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
                </p>
            </div>
        </div>
    </div>
</div>  

我得到了这个:

http://i.imgur.com/0dhqCZO.png

如何在两者之间设置 X 像素的空间？ :S

---

还有一个问题，不要再发一个帖子:

如何将两列设置为相同的高度？ (我知道这是一个很棒的新手问题哈哈)

Answer 1

首先，实际上这两列之间有一个空格(30px，因为 col- 类中包含 Bootstrap 填充。你看不到这个 30px 的间隙，因为你将背景设置为 col- 类。为了看到它，您必须在 col- 类中有另一个 div。

CODEPEN EXAMPLE

其次，阅读 grid system in Bootstrap ，你不能在 col-md-3 之后直接有 col-md-12(如果你想嵌套列在另一列)。

您可以通过更改 col- 类填充来更改间隙。 Bootstrap 的默认值是每边 15px。例如:

.col-md-3,
.col-md-9 {
  padding-left: 60px;
  padding-right: 60px;
}

CODEPEN EXAMPLE

高度相同的列，最简单的例子是这样的:

.column-1,
.column-2 {
  height: 300px;
}

CODEPEN EXAMPLE