Html Bootstrap 3：缺少排水沟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18071055/
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
Bootstrap 3: Missing gutters
提问by bcoop713
Just started playing around with bootstrap 3 and I can't get gutters between columns to work.
刚开始玩引导程序 3，我无法在列之间设置排水沟。
I created the most basic code to test with:
我创建了最基本的代码来测试：
<!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>
And the result is just one big green/blue box without any gutter in between the two columns. I have also tried it on a fiddle with no luck http://jsfiddle.net/Tgkkb/What am I missing?
结果只是一个大的绿色/蓝色框，两列之间没有任何排水沟。我也试过在小提琴上没有运气http://jsfiddle.net/Tgkkb/我错过了什么？
回答by Jonathan Lonowski
Bootstrap 3 switched to using paddingfor the gutters rather than margins. So, the content is parted, but the boxes aren't. And a background-colorwill fill the paddingas well.
Bootstrap 3 切换到padding用于排水沟而不是margins。所以，内容是分开的，但盒子不是。和一个background-color将填充padding为好。
Though, you should be able to get the desired effect by setting the background on inner boxes:
不过，您应该能够通过在内部框上设置背景来获得所需的效果：
<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>
Though, the goal is just to apply the backgroundto a single, wrapping child. So, if the headers definitely won't have any siblings, then you can possibly forgo the additional <div>s:
但是，目标只是将 应用于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>
回答by dyve
If you want to set the padding or margin for your columns, you can use the row-no-guttersclass on the row (introduced in v3.4.0) and add your own padding and background.
如果要为列设置填充或边距，可以使用row-no-gutters行上的类（在 v3.4.0 中引入）并添加自己的填充和背景。
