bco*_*713 32 html css twitter-bootstrap twitter-bootstrap-3
刚刚开始使用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/ 我错过了什么？
Jon*_*ski 62
Bootstrap 3切换到padding用于排水沟而不是margins.所以,内容是分开的,但框不是.一个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>
尽管如此,我们的目标只是将它应用于background 一个包裹着的孩子.所以,如果标题肯定不会有任何兄弟姐妹,那么你可以放弃额外的<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>
| 归档时间： |
|
| 查看次数： |
30869 次 |
| 最近记录： |