问题:
在引导3中删除col-md-*的左右边距。
HTML代码:
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content" id="">
<div id='jqxWidget'>
<div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
<div style="clear:both;" id="listBoxB"></div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 362px;"></div>
</div>
</div>
</div>
</div>
期望的输出:
目前，这段代码在两列的右侧和左侧添加了填充/边距。我在想，为了去掉两边的多余空间，我错过了什么?
注意:
如果我删除“col-md-4”，那么两列展开到100%，但我希望它们彼此相邻。
Bootstrap 4添加了.no-gutters类。
Bootstrap 3.4添加了.row-no-gutters类
Bootstrap 3:我总是把这个风格添加到我的Bootstrap LESS / SASS:
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
然后在HTML中你可以写:
<div class="row row-no-padding">
如果你只想瞄准子列，你可以使用子选择器(感谢John Wu)。
.row-no-padding > [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
你也可以只移除某些设备尺寸的填充(例如SASS):
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.row-sm-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
}
如果您希望媒体查询向上支持小型设备，可以删除媒体查询的max-width部分。
以Vitaliy Silin的回答为基础。不仅包括我们根本不需要填充的情况，还包括我们有标准大小填充的情况。
在sassmeister.com上查看此代码到CSS的实时转换
@mixin padding($side, $size) {
$padding-size : 0;
@if $size == 'xs' { $padding-size : 5px; }
@else if $size == 's' { $padding-size : 10px; }
@else if $size == 'm' { $padding-size : 15px; }
@else if $size == 'l' { $padding-size : 20px; }
@if $side == 'all' {
.padding--#{$size} {
padding: $padding-size !important;
}
} @else {
.padding-#{$side}--#{$size} {
padding-#{$side}: $padding-size !important;
}
}
}
$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
@each $current-size in $sizes-list {
@include padding($current-side,$current-size);
}
}
然后输出:
.padding--none {
padding: 0 !important;
}
.padding--xs {
padding: 5px !important;
}
.padding--s {
padding: 10px !important;
}
.padding--m {
padding: 15px !important;
}
.padding--l {
padding: 20px !important;
}
.padding-top--none {
padding-top: 0 !important;
}
.padding-top--xs {
padding-top: 5px !important;
}
.padding-top--s {
padding-top: 10px !important;
}
.padding-top--m {
padding-top: 15px !important;
}
.padding-top--l {
padding-top: 20px !important;
}
.padding-right--none {
padding-right: 0 !important;
}
.padding-right--xs {
padding-right: 5px !important;
}
.padding-right--s {
padding-right: 10px !important;
}
.padding-right--m {
padding-right: 15px !important;
}
.padding-right--l {
padding-right: 20px !important;
}
.padding-bottom--none {
padding-bottom: 0 !important;
}
.padding-bottom--xs {
padding-bottom: 5px !important;
}
.padding-bottom--s {
padding-bottom: 10px !important;
}
.padding-bottom--m {
padding-bottom: 15px !important;
}
.padding-bottom--l {
padding-bottom: 20px !important;
}
.padding-left--none {
padding-left: 0 !important;
}
.padding-left--xs {
padding-left: 5px !important;
}
.padding-left--s {
padding-left: 10px !important;
}
.padding-left--m {
padding-left: 15px !important;
}
.padding-left--l {
padding-left: 20px !important;
}
通常使用.row来包装两列，而不是.col-md-12——这是一列包装另一列。毕竟，.row没有col-md-12所带来的额外的边距和填充，而且还通过负的左右边距减少了列所引入的空间。
<div class="container">
<div class="row">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
<div class="col-md-8 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
</div>
</div>
如果真的想删除空白/边距，可以添加一个类来过滤每个子列的空白/边距。
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
