问题:
删除Bootstrap 3中col-md- *右侧和左侧的填充/边距。
HTML code:
<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%,但我希望它们彼此相邻。
答案 0 :(得分:424)
您通常使用.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;
}
答案 1 :(得分:166)
我总是将这种风格添加到我的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;
}
}
}
如果您希望它向上支持小型设备,则可以删除媒体查询的最大宽度部分。
答案 2 :(得分:43)
减少列上的填充不会成功,因为你会扩展页面的宽度,使其与页面的其余部分不一致,比如navbar。您需要同样减少行上的负边距。以@ martinedwards&#39;更少的例子:
.row-no-padding {
margin-left: 0;
margin-right: 0;
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
答案 3 :(得分:22)
特别针对SASS mixin:
@mixin no-padding($side) {
@if $side == 'all' {
.no-padding {
padding: 0 !important;
}
} @else {
.no-padding-#{$side} {
padding-#{$side}: 0 !important;
}
}
}
@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");
然后在HTML中,您可以使用
.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides
当然,你只能@include那些你需要的声明。
答案 4 :(得分:15)
只需添加“no-padding”,这是bootstrap 3中的内置类
答案 5 :(得分:12)
此后仅适用于Bootstrap4
<div class="p-0 m-0">
</div>
注意:.p-0和.m-0已添加bootstrap.css
答案 6 :(得分:10)
另一种解决方案,只有在从LESS源编译bootstrap时才可行,是重新定义设置列填充的变量。
您会在variables.less
文件中找到该变量:它名为@grid-gutter-width
。
它在消息来源中描述如下:
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
将此项设置为0,编译bootstrap.less
,并包含生成的bootstrap.css
。你完成了。如果您已经使用像我这样的引导源,它可以是定义附加规则的替代方法。
答案 7 :(得分:10)
Bootstrap 4 有一个本机类来执行此操作:将类.no-gutters
添加到父.row
答案 8 :(得分:6)
[class*="col-"]
padding: 0
margin: 0
答案 9 :(得分:3)
Bootstrap 4 has the class .no-gutters that you can add to the row element.
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-12">
[YOUR CONTENT HERE]
</div>
</div>
</div>
Reference: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options
中传递多个变量答案 10 :(得分:3)
以上解决方案都不适合我。在this answer之后,我能够创造出适合我的东西。在这里,我也使用媒体查询将其限制为仅限小屏幕。
@media (max-width: @screen-sm) {
[class*="col-"] {
padding-left: 0;
padding-right: 0;
}
.row {
margin-left: 0;
margin-right: 0;
}
.container-fluid {
margin: 0;
padding: 0;
}
}
答案 11 :(得分:2)
我想使用
更容易margin:-30px;
覆盖bootstrap设置的原始值。
我试过
margin: 0px -30px 0px -30px;
它对我有用。
答案 12 :(得分:2)
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4">
<div class="widget row">
<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 row">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 362px;"></div>
</div>
</div>
</div>
您可以在col-md-4内的div中添加一行行,并且行的-15px边距将平衡列中的装订线。关于Bootstrap 3中的排水沟和排的好解释here。
答案 13 :(得分:1)
自3.4.0版以来,Bootstrap 3具有删除填充的官方方法:类row-no-gutters
。
documentation中的示例:
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
答案 14 :(得分:1)
使用3.7.7以下的引导程序删除黑白列的间距。
.no-gutter是一个自定义类,您可以将其添加到行DIV中
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
答案 15 :(得分:1)
将你的专栏包裹在.row中,然后在该div中添加一个名为“no-gutter”的课程
<div class="container">
<div class="row no-gutter">
<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">
</div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
</div>
然后将下面的内容粘贴到您的CSS文件
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
答案 16 :(得分:1)
使用css删除/自定义Bootstrap Gutter 参考:http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/
/* remove */
.gutter-0.row {
margin-right: -0px;
margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
padding-right: 0px;
padding-left: 0px;
}
/* customize */
.gutter-6.row {
margin-right: -3px;
margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
padding-right: 3px;
padding-left: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
答案 17 :(得分:0)
您可以使用fork
gem "bootstrap", github: "srghma/bootstrap-rubygem-without-gutter"
答案 18 :(得分:0)
您可以创建一个用于删除边距的新类,并且可以应用于要删除额外边距的元素:
.margL0 { margin-left:0 !important }
!important :它可以帮助您删除默认保证金或覆盖当前保证金值
并应用于您要从左侧删除边距的div。
答案 19 :(得分:0)
我仍然希望可以控制每个屏幕尺寸的每个填充,因此此CSS可能对你们有用:)
.nopadding-lg {
padding-left: 0!important;
padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}
@media (max-width: 576px) {
.nopadding-xs {
padding-left: 0!important;
padding-right: 0!important;
}
.nopadding-left-xs {padding-left: 0!important;}
.nopadding-right-xs {padding-right: 0!important;}
}
@media (max-width: 768px) {
.nopadding-sm {
padding-left: 0!important;
padding-right: 0!important;
}
.nopadding-left-sm {padding-left: 0!important;}
.nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
.nopadding-md {
padding-left: 0!important;
padding-right: 0!important;
}
.nopadding-left-md {padding-left: 0!important;}
.nopadding-right-md {padding-right: 0!important;}
}
答案 20 :(得分:0)
您可以自定义Bootstrap网格系统并定义自定义响应网格。
将以下装订线宽度的默认值从@grid-gutter-width = 30px
更改为@grid-gutter-width = 0px
(Gutter宽度是列之间的填充。左右分为两半。)
答案 21 :(得分:0)
如果您使用SASS文件下载bootstrap,您将能够编辑配置文件,其中有列的边距设置,然后保存它,这样SASS计算列的新宽度
答案 22 :(得分:0)
有时您可能会丢失列所需的填充。他们最终坚持彼此。为了防止这种情况,您可以按如下方式更新类:
<div class="col-md-3 NoPaddingForChildren">
<div class="col-md-6">
<label>Id</label>
<input ng-model="ID" class="form-control">
</div>
<div class="col-md-6">
<label>Value</label>
<input ng-model="Val" class="form-control">
</div>
</div>
和相应的课程:
.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
padding-left: 0;
padding-right: 0;
}
.NoPaddingForChildren > div:first-child {
padding-left: 0;
}
.NoPaddingForChildren > div:last-child {
padding-right: 0;
}
答案 23 :(得分:0)
建立Vitaliy Silin's answer。不仅包括我们根本不需要填充的情况,还包括我们有标准尺寸填充的情况。
See the live conversion of this code to CSS on sassmeister.com
@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;
}
答案 24 :(得分:0)
您可以使用bootstrap创建Less Mixins来管理列的边距和填充,例如
http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/
用法:
xs-padding-lr-15px//left right both
xs-padding-l-15px
xs-padding-r-15px
类似于设置保证金/填充零,您可以使用
xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
答案 25 :(得分:0)
<style>
.col-md-12{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>