从引导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%，但我希望它们彼此相邻。

当前回答

Bootstrap 4有一个原生类来做这件事:将类.no-gutters添加到父类.row

2018-04-05 09:10:43

其他回答

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部分。

2014-05-19 15:46:53

您可以自定义引导网格系统并定义自定义响应网格。

将以下沟槽宽度的默认值从@grid-gutter-width = 30px更改为@grid-gutter-width = 0px

(沟槽宽度是列之间的填充物。它被分成了左右两半。)

2017-07-25 13:55:37

[class*="col-"]
  padding: 0
  margin: 0

2014-06-14 18:52:07

<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中添加一个类row，行的-15px边缘将平衡列的沟槽。在Bootstrap 3中关于水槽和排的很好的解释。

2015-07-08 21:56:01

Bootstrap 4有类.no-gutters，可以添加到row元素中。

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-md-12">
            [YOUR CONTENT HERE]
        </div>
    </div>
</div>

参考:http://getbootstrap.com/docs/4.0/layout/grid/ #网格选项

2017-11-20 02:09:42

从引导3中的列中删除填充

推荐文章

最新文章

标签