我试图在一行内的 2x col-sm-6 之间留出一些空间/间隙。已经从 Stack Overflow 的早期帖子中尝试了一些方法,但似乎没有一个能产生正确的结果。
我尝试过的:
<div class="row">
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
</div>
好吧...这创建了正确的间距,但是左侧和右侧并不与页面内容的其余部分对齐。为了帮助你们理解我要解释的内容,这里有一张图片。
在这里你可以看到上面的白色内容,宽度是我试图为页面内的所有元素保留的宽度。我知道这是因为我添加了额外的 div,因为下面的代码正在生成您在图片中看到的上面的白色内容框,但是没有间距。也尝试过使用 col-md-5 和 2 的偏移量,但这会产生太大的间距。
<div class="row">
<div class="col-sm-6 contentpage3">
</div>
<div class="col-sm-6 contentpage3">
</div>
</div>
我做错了什么?
最佳答案
你可以这样做。
所有 .col-*
元素都应该在行元素内。
所有.col-*
元素都应该包含内容,而不是内容。
.example {
padding-bottom: 15px;
background: #ccc;
}
.example > .row > div {
margin-top: 15px;
}
.example .inside {
height: 50px;
background: #fff;
border: 1px solid #eee;
}
<div class="container-fluid example">
<div class="row">
<div class="col-xs-12">
<div class="inside"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="inside"></div>
</div>
<div class="col-xs-6">
<div class="inside"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
关于css - 一行内两个 col-sm-6 之间的间距/间隙,并将其与页面的其余部分对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31909539/