Problem:
删除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>
Desired output:
目前,此代码在两列的右侧和左侧添加填充/边距 . 我想知道为了消除侧面的这个额外空间我错过了什么?
Notice:
如果我删除“col-md-4”,那么两列都会扩展到100%,但我希望它们彼此相邻 .
23 回答
减少列上的填充不会成为诀窍,因为你将扩展页面的宽度,使其与页面的其余部分不一致,比如navbar . 您需要同样减少行上的负边距 . 以@martinedwards为例:
我想这更容易使用
覆盖bootstrap设置的原始值 .
我试过了
它对我有用 .
您可以创建一个用于删除边距的新类,并且可以应用于要删除额外边距的元素:
!important :它将帮助您删除默认边距或覆盖当前边距值
并应用于您要从左侧删除边距的div
以上解决方案都不适合我 . 在this answer之后,我能够创造出适合我的东西 . 在这里,我还使用媒体查询将其限制为仅限小屏幕 .
您通常使用.row来包装两列,而不是
.col-md-12
- 这是一个包含另一列的列 . 毕竟,.row没有col-md-12
带来的额外边距和填充,并且还会折叠列将带有负左右边距的空间 .如果您确实想要删除填充/边距,请添加一个类来过滤掉每个子列的边距/填充 .
使用css参考删除/自定义Bootstrap Gutter:http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/
You can create Less Mixins using bootstrap for manage margins and paddings of your columns like,
http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/
Usage:
类似地设置margin / padding零,你可以使用,
将您的列包装在.row中,并在该div中添加一个名为“no-gutter”的类
然后将下面的内容粘贴到CSS文件中
特别适用于SASS mixin:
然后在HTML中,您可以使用
当然,你只能@include你需要的那些声明 .
您可以自定义Bootstrap网格系统并定义自定义响应网格 .
将以下装订线宽度的默认值从
@grid-gutter-width = 30px
更改为@grid-gutter-width = 0px
(装订线宽度是列之间的填充 . 左右分为两半 . )
我总是将这种风格添加到我的Bootstrap LESS / SASS:
然后在HTML中你可以写:
如果您只想定位子列,可以使用子选择器(感谢John Wu) .
您可能还想删除某些设备尺寸的填充(SASS示例):
如果您希望媒体查询向上支持小型设备,则可以删除该媒体查询的最大宽度部分 .
Bootstrap具有可以添加到row元素的类.no-gutters .
参考:http://getbootstrap.com/docs/4.0/layout/grid/#grid-options
有时您可能会丢失列所需的填充 . 他们最终坚持彼此 . 为防止这种情况,您可以按如下方式更新类:
和相应的类:
Bootstrap 4 有一个本机类来执行此操作:将类
.no-gutters
添加到父.row
Build Vitaliy Silin's answer . 不仅涵盖我们根本不需要填充的情况,还覆盖我们有标准尺寸衬垫的情况 .
See the live conversion of this code to CSS on sassmeister.com
然后输出:
另一个解决方案,只有从LESS源编译bootstrap时才可行,是重新定义设置列填充的变量 .
您将在
variables.less
文件中找到该变量:它名为@grid-gutter-width
.在消息来源中描述如下:
将此值设置为0,编译
bootstrap.less
,并包含生成的bootstrap.css
. 你完成了 . 如果您已经使用像我这样的引导源,它可以是定义附加规则的替代方法 .使用bootstrap 3.7.7或更低版本从b / w列中删除间距 .
您可以在col-md-4内的div中添加一类行,并且行的-15px边距将 balancer 列中的装订线 . 关于Bootstrap 3中的排水沟和排的好解释here .
如果您使用SASS文件下载bootstrap,您将能够编辑配置文件,其中有一个列的边距设置,然后保存它,这样SASS计算列的新宽度
只需在bootstrap中添加 "no-padding" 这是内置类
此后仅在Bootstrap4上提供
注意:.p-0和.m-0已经添加了bootstrap.css