PROSAGA码农传奇-Bootstrap-从Bootstrap 3中的列中删除填充

19 条回复

0#
回复此人
NetworkAttachedStorage | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您使用SASS文件下载引导程序，您将能够编辑配置文件，其中有列的边距设置，然后保存它，这样SASS计算列的新宽度 </p> </DIV>

编辑
1#
回复此人
蜡笔小辛 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 将您的列包装在.row中，并在该div中添加一个名为“no-gutter”的类 </p> <pre> <code> <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> </code> </pre> <P> </p> <P> 然后将下面的内容粘贴到CSS文件中 </p> <pre> <code> .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; } </code> </pre> </DIV>

编辑
2#
回复此人
林老爷的日常 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 建立起来 <a href="https://stackoverflow.com/a/25052264/759452"> Vitaliy Silin的回答 </A> 。不仅涵盖我们根本不需要填充的情况，还涵盖我们有标准尺寸填充的情况。 </p> <P> <a href="http://www.sassmeister.com/gist/a00fd6c009c09458439d" rel="nofollow noreferrer"> 在sassmeister.com上查看此代码的实时转换为CSS </A> </p> <pre> <code> @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); } } </code> </pre> <P> 然后输出： </p> <pre> <code> .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; } </code> </pre> </DIV>

编辑
3#
回复此人
布偶的表弟派大星丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以创建一个用于删除边距的新类，并可以应用于要删除额外边距的元素： </p> <pre> <code> .margL0 { margin-left:0 !important } </code> </pre> <P> 的<strong> ！重要 </强> ：它将帮助您删除默认保证金或覆盖当前保证金值 </p> <P> 并应用于要从左侧移除边距的div </p> </DIV>

编辑
4#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> [class*="col-"] padding: 0 margin: 0 </code> </pre> </DIV>

编辑
5#
回复此人
早岁那知世事艰 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> Bootstrap 4 </强> 有一个本机类来执行此操作：添加类 <code> .no-gutters </code> 到了父母 <code> .row </code> </p> </DIV>

编辑
6#
回复此人
薄情 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以自定义Bootstrap网格系统并定义自定义响应网格。 </p> <P> 更改以下装订线宽度的默认值 <code> @grid-gutter-width = 30px </code> 至 <code> @grid-gutter-width = 0px </code> </p> <P> （装订线宽度是列之间的填充。左右分为两半。） </p> </DIV>

编辑
7#
回复此人
大黑骡子王 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <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> </code> </pre> </DIV>

编辑
8#
回复此人
满目山河 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有时您可能会丢失列所需的填充。他们最终坚持彼此。为防止这种情况，您可以按如下方式更新类： </p> <pre> <code> <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> </code> </pre> <P> 和相应的类： </p> <pre> <code> .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; } </code> </pre> </DIV>

编辑
9#
回复此人
一只特立独行的猪 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用css删除/自定义Bootstrap Gutter 参考： <a href="http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/" rel="nofollow noreferrer"> http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/ </A> </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> /* 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; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <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> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
10#
回复此人
哈哈哈哈 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 专门针对SASS mixin： </p> <pre> <code> @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"); </code> </pre> <P> 然后在HTML中，您可以使用 </p> <pre> <code> .no-padding-left .no-padding-right .no-padding-bottom .no-padding-top .no-padding - to remove padding from all sides </code> </pre> <P> 当然，你只能@include你需要的那些声明。 </p> </DIV>

编辑
11#
回复此人
Moso31 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我想它更容易使用 </p> <pre> <code> margin:-30px; </code> </pre> <P> 覆盖bootstrap设置的原始值。 </p> <P> 我试过了 </p> <pre> <code> margin: 0px -30px 0px -30px; </code> </pre> <P> 它对我有用。 </p> </DIV>

编辑
12#
回复此人
我头上有犄角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Bootstrap 4具有可以添加到行元素的类.no-gutters。 </p> <pre> <code> <div class="container-fluid"> <div class="row no-gutters"> <div class="col-md-12"> [YOUR CONTENT HERE] </div> </div> </div> </code> </pre> <P> 参考： <a href="http://getbootstrap.com/docs/4.0/layout/grid/#grid-options" rel="nofollow noreferrer"> http://getbootstrap.com/docs/4.0/layout/grid/#grid-options </A> </p> </DIV>

编辑
13#
回复此人
筱梨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <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> </code> </pre> <P> </p> <P> 您可以在col-md-4内的div中添加一类行，并且行的-15px边距将平衡列中的装订线。很好的解释 <a href="http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works" rel="nofollow"> 这里 </A> 关于Bootstrap 3中的排水沟和行。 </p> </DIV>

编辑
14#
回复此人
听风～ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 减少列上的填充不会成为诀窍，因为你将扩展页面的宽度，使其与页面的其余部分不一致，比如navbar。您需要同样减少行上的负边距。以@martinedwards'为例： </p> <pre> <code> .row-no-padding { margin-left: 0; margin-right: 0; [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } </code> </pre> </DIV>

编辑
15#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 您可以使用bootstrap创建Less Mixins来管理列的边距和填充，例如， </强> </p> <P> <a href="http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/" rel="nofollow"> http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/ </A> </p> <P> 的<strong> 用法： </强> </p> <pre> <code> xs-padding-lr-15px//left right both xs-padding-l-15px xs-padding-r-15px </code> </pre> <P> 类似地设置margin / padding零，你可以使用， </p> <pre> <code> xs-padding-lr-0px xs-padding-l-0px xs-padding-r-0px </code> </pre> </DIV>

编辑
16#
回复此人
敢嫁就敢娶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用bootstrap 3.7.7或更低版本从b / w列中删除间距。 </p> <BLOCKQUOTE> <P> .no-gutter是一个可以添加到行DIV的自定义类 </p> </BLOCKQUOTE> <pre> <code> .no-gutter > [class*='col-'] { padding-right:0; padding-left:0; } </code> </pre> </DIV>

编辑
17#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 另一个解决方案，只有从LESS源编译bootstrap时才可行，是重新定义设置列填充的变量。 </p> <P> 你会在中找到变量 <code> variables.less </code> 文件：它被调用 <code> @grid-gutter-width </code> 。 </p> <P> 在消息来源中描述如下： </p> <pre> <code> //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px; </code> </pre> <P> 将此设置为0，编译 <code> bootstrap.less </code> ，并包括结果 <code> bootstrap.css </code> 。你完成了。如果您已经使用像我这样的引导源，它可以是定义附加规则的替代方法。 </p> </DIV>

编辑

登录后才能参与评论