33

刚开始使用 bootstrap 3，我无法在列之间使用排水沟。

我创建了最基本的代码来测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js">                                                                                                                                  </script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" media="screen" />
    <style>
        .box1 {
            background-color: green;
        }
        .box2 {
            background-color: blue;
        }
    </style>
</head>
<div class="container">
    <div class="row">
        <div class="col-lg-4 box1">
            <h1>Test</h1>
        </div>
        <div class="col-lg-8 box2">
            <h1>Test2</h1>
        </div>
    </div>
</div>
</html>

结果只是一个大的绿色/蓝色框，两列之间没有任何排水沟。我也在一个没有运气的小提琴上试过它http://jsfiddle.net/Tgkkb/ 我错过了什么？

4

2 回答 2

62

Bootstrap 3 切换到padding用于排水沟而不是margins。所以，内容是分开的，但盒子没有。abackground-color也会填满padding。

不过，您应该能够通过在内盒上设置背景来获得所需的效果：

<div class="row">
    <div class="col-sm-4">
        <div class="box1">
            <h1>Test</h1>
        </div>
    </div>
    <div class="col-sm-8">
        <div class="box2">
            <h1>Test2</h1>
        </div>
    </div>
</div>

http://jsfiddle.net/PFxUk/

不过，目标只是将 应用于background 单个包装的 child。因此，如果标题肯定没有任何兄弟姐妹，那么您可以放弃额外<div>的 s：

<div class="row">
    <div class="col-sm-4">
        <h1 class="box1">Test</h1>
    </div>
    <div class="col-sm-8">
        <h1 class="box2">Test2</h1>
    </div>
</div>

http://jsfiddle.net/G2gbG/

于 2013-08-06T02:59:39.593 回答
0

如果要为列设置填充或边距，可以使用row-no-gutters行上的类（在 v3.4.0 中引入）并添加自己的填充和背景。

https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters

于 2019-03-08T13:47:17.533 回答