从Bootstrap 3的列中删除填充
问题：
删除引导程序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％，但是我希望它们彼此相邻。
您通常会使用.row来包装两列，而不是.col-md-12 – 这是包含另一列的列。 最后， .row没有额外的边距和填充，而col-md-12会带来空间，同时还会减less一个列会带来负向左右边距的空间。
<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; }
我总是将这种风格添加到我的Bootstrap LESS / SASS：
.row-no-padding { [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } }
然后在HTML中，你可以写：
<div class="row row-no-padding">
如果你只想定位子列，你可以使用子select器（感谢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; } } }
如果您希望向上支持小型设备，则可以删除媒体查询的最大宽度部分。
减less列上的填充不会使伎俩，因为你会扩大页面的宽度，使其与你的网页的其余部分，说navbar不平衡。 您需要同样减less行上的负余量。 采取@马丁'举例：
.row-no-padding { margin-left: 0; margin-right: 0; [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } }
特别针对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
当然，你可以@只包括那些你需要的声明。
另一种解决scheme，只有从LESS源文件编译bootstrap时才可行，重新定义设置列填充的variables。
您将在variables.less文件中find该variables：它被称为@grid-gutter-width 。
它的来源是这样描述的：
//** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;
将其设置为0，编译bootstrap.less ，并包含生成的bootstrap.css 。 你完成了。 如果您已经在使用像我这样的引导源，那么可以定义一个额外的规则。
只需在bootstrap中添加内build类的“no-padding”
[class*="col-"] padding: 0 margin: 0
上述解决scheme都不适合我。 在这个答案之后，我能够创造出适合我的东西。 在这里，我也使用媒体查询来限制只有小屏幕。
@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; } }
<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的margin将平衡掉列上的阴影。 这里有关Bootstrap 3中的排水沟和行的很好的解释。
我想这只是使用起来更容易
margin:-30px;
覆盖由bootstrap设置的原始值。
我试过了
margin: 0px -30px 0px -30px;
它为我工作。
此后仅在Bootstrap4上可用
<div class="p-0 m-0"> </div>
注意：.p-0和.m-0已经添加了bootstrap.css
将你的列包装在.row中，并添加一个名为“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; }
使用css参考删除/定制Bootstrap装订线： 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="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/PjxzdmcgeG+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/PjxzdmcgeG+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/PjxzdmcgeG+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/PjxzdmcgeG+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>
您可以创build一个删除边距的新类，并可以将其应用于要删除额外边距的元素：
.margL0 { margin-left:0 !important }
！重要的 ：它将帮助您删除默认边距或覆盖当前边距值
并适用于您想要从左侧删除边距的那个div
<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>
您可以使用引导来创build较less的混音，以pipe理列的边距和填充，
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
build立在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 sml; @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; }
有时你可能会失去你想要的列的填充。 他们最终坚持对方。 为了防止这种情况，您可以按如下方式更新课程：
<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; }
如果使用SASS文件下载引导程序，您将能够编辑configuration文件，其中有一个列的边距设置，然后保存它，这样SASS计算列的新宽度
您可以自定义Bootstrap Grid系统并定义自定义响应式网格。
将@grid-gutter-width = 30px的以下排水沟宽度的默认值更改为@grid-gutter-width = 0px
（宽度在列间填充，左右分为两半）
