如何使用 bootstrap 和 css 将列粘在一起?
我想创建这样的东西:
我创建的内容:
这是我的 HTML 和 CSS 标记:
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
我的CSS
.box1 {
background: red;
}
.box2{
background: green;
}
.box3 {
background: yellow;
}
我们将不胜感激!
最佳答案
根据您要实现的目标,有多种可能性。
如果您想消除设计中所有列之间的间隙(称为间距),您可以在 http://getbootstrap.com/customize/#grid-system 自定义您自己的 Bootstrap 您会看到需要设置为 0 的变量“@grid-gutter-width”。
如果你想让一些内容跨越排水沟,这样它们就可以接触到相邻的元素,使用一个类来否定排水沟。有点像
.no-pad{
padding-left:0;
padding-right:0;
}
然后将它添加到所有你想要的无间距的列。
如果您希望背景颜色相互接触,但仍要为您的文本保持良好的分栏,您可以简单地将背景样式应用于分栏本身。
关于html - 如何将 Bootstrap 框粘在一起?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41299448/