gpt4 book ai didi

html - Bootstrap 3 : Missing gutters

转载 作者:技术小花猫 更新时间:2023-10-29 11:42:22 25 4
gpt4 key购买 nike

刚开始使用 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>

结果只是一个绿色/蓝色的大框,两列之间没有任何间距。我也在 fiddle 上试过,但没有成功 http://jsfiddle.net/Tgkkb/我错过了什么?

最佳答案

Bootstrap 3 切换到使用 padding对于排水沟而不是 margin秒。所以,内容是分开的,但盒子不是。还有一个 background-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 to a single, wrapping child .因此,如果 header 肯定没有任何 sibling ,那么您可以放弃额外的 <div>小号:

<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/

关于html - Bootstrap 3 : Missing gutters,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18071055/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com