html - 如何在没有列填充的情况下为 Bootstrap 行的背景着色?
问题描述
我试图使背景适合引导程序的列大小,但仍然出现在整行中。我怎么能做到这一点?
我尝试了以下方法:
.yourcontent {
margin-bottom: 5px;
}
.yourcontent [class^=col-] {
background-color: cyan;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="btn-group" role="group" style="margin-top: 5px; margin-bottom: 5px">
<button type="button" class="btn btn-primary">Foo</button>
<button type="button" class="btn btn-primary">Bar</button>
<button type="button" class="btn btn-primary">Foobar</button>
<button type="button" class="btn btn-primary">Barfoo</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row yourcontent">
<div class="col-xs-6">
<div class="">
Foo
</div>
</div>
<div class="col-xs-2">
<div class="">
Bar
</div>
</div>
<div class="col-xs-2">
<div class="">
Foobar
</div>
</div>
<div class="col-xs-2">
<div class="">
Barfoo
</div>
</div>
</div>
</div>
</div>
</div>
我希望它看起来像这样,除了列之间的空白也应该用颜色填充:
.yourcontent {
margin-bottom: 5px;
background-color: cyan;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="btn-group" role="group" style="margin-top: 5px; margin-bottom: 5px">
<button type="button" class="btn btn-primary">Foo</button>
<button type="button" class="btn btn-primary">Bar</button>
<button type="button" class="btn btn-primary">Foobar</button>
<button type="button" class="btn btn-primary">Barfoo</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="yourcontent">
Foo
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Bar
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Foobar
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Barfoo
</div>
</div>
</div>
</div>
</div>
</div>
我希望背景拉伸整行,而不是第一个 col-xs-* 元素的 padding-left 和给定行中最后一个 col-xs-* 元素的 padding-right。有人会碰巧知道如何解决这个问题吗?
解决方案
在Bootstrap 4中你有这个.no-gutters
类。由于您使用的是Bootstrap 3,因此不包括此类。但是,您可以自己轻松地创建此类。这将删除列之间的排水沟。
.yourcontent {
margin-bottom: 5px;
background-color: cyan;
}
/*
Optional, to fix to width of the row
*/
.row.no-gutters {
margin-left: 0;
margin-right: 0;
}
.row.no-gutters > [class^="col-"] {
padding-left: 0;
padding-right: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="btn-group" role="group" style="margin-top: 5px; margin-bottom: 5px">
<button type="button" class="btn btn-primary">Foo</button>
<button type="button" class="btn btn-primary">Bar</button>
<button type="button" class="btn btn-primary">Foobar</button>
<button type="button" class="btn btn-primary">Barfoo</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row no-gutters">
<div class="col-xs-6">
<div class="yourcontent">
Foo
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Bar
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Foobar
</div>
</div>
<div class="col-xs-2">
<div class="yourcontent">
Barfoo
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 如何在循环中更新钩子状态?
- sql - 对子类别的记录求和,并将总和返回给主类别
- swift - 在 swift 中将函数与闭包“弱自我”作为参数传递
- c++ - 为什么我的 ComputeAsync 比我的 ComputeNonAsync 花费更多时间?
- php - 为什么当条件为假时这段代码运行我是男孩 5 次
- java - 我们可以在java中创建抽象类的实例吗
- session - 错误 - 会话中未定义元素 X
- python - 如何在 Python 中的键和排序列表中放置多个值?
- javascript - 如何阻止函数的执行(即强制同步行为)?
- php - 从帖子(python)获取数据(php)