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

当前回答

我仍然喜欢控制每个屏幕大小的每个填充，所以这个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;}
}

2020-01-14 10:21:25

其他回答

你可以创建一个新的类来删除边距，并应用于你想要删除额外边距的元素:

.margL0 { margin-left:0 !important }

重要:它将帮助您删除默认的保证金或覆盖当前的保证金值

并应用于您想要从左侧删除边缘的div

2013-10-24 10:13:57

只减少列上的填充物不会达到目的，因为你会扩大页面的宽度，使它与页面的其他部分不均匀，比如导航栏。你需要同样地减少行上的负边距。以@martinedwards的LESS为例:

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

2014-08-10 21:41:04

有时可能会丢失列所需的填充。它们最终会粘在一起。为了防止这种情况，你可以像下面这样更新类:

<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;
}

2016-07-26 15:24:29

你可以用叉子

https://github.com/srghma/bootstrap-rubygem-without-gutter/commit/8e42c16dcc2f132af3489c2275dd7460b524d437

gem "bootstrap", github: "srghma/bootstrap-rubygem-without-gutter"

2019-05-24 10:12:45

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

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

推荐文章

最新文章

标签