引导3：缺少沟槽 [英] Bootstrap 3: Missing gutters
问题描述
我创建了最基本的代码来测试：
<！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 =stylesheetmedia =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>测试< / h1>
< / div>
< div class =col-lg-8 box2>
< h1> Test2< / h1>
< / div>
< / div>
< / div>
< / html>
结果只是一个大的绿色/蓝色盒子，两列之间没有任何沟槽。
我也试过一个没有运气的小提琴 http://jsfiddle.net/Tgkkb/
Bootstrap 3切换到使用 padding 而不是 margin 。所以，内容是分开的，但框不是。 background-color 也会填充 padding 。
虽然，您应该能够通过设置内框上的背景获得所需的效果：
< div class =row>
< div class =col-sm-4>
< div class =box1>
< h1>测试< / h1>
< / div>
< / div>
< div class =col-sm-8>
< div class =box2>
< h1> Test2< / h1>
< / div>
< / div>
< / div>
但是，目标只是应用背景 使用单一环绕儿童。所以，如果标题肯定不会有任何兄弟姐妹，那么你可以放弃额外的< div> s：
< div class =row>
< div class =col-sm-4>
< h1 class =box1>测试< / h1>
< / div>
< div class =col-sm-8>
< h1 class =box2> Test2< / h1>
< / div>
< / div>
Just started playing around with bootstrap 3 and I can't get gutters between columns to work.
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?
Bootstrap 3 switched to using padding for the gutters rather than margins. So, the content is parted, but the boxes aren't. And a background-color will fill the padding as well.
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 background to a single, wrapping child. So, if the headers definitely won't have any siblings, then you can possibly forgo the additional <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>
这篇关于引导3：缺少沟槽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
