从Bootstrap 3的列中删除填充

十三西门2020-03-23

问题：

删除Bootstrap 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％，但我希望它们彼此相邻。

西门达蒙2020/03/23 09:59:50

上述解决方案都不适合我。遵循此答案，我能够创建对我有用的东西。在这里，我还使用媒体查询将其限制为仅小屏幕。

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

老丝2020/03/23 09:59:50

自版本3.4.0起，Bootstrap 3 具有删除填充的官方方法：class row-no-gutters。

文档中的示例：

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Near路易蛋蛋2020/03/23 09:59:50

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/#grid-options

小宇宙卡卡西2020/03/23 09:59:50

此后仅适用于Bootstrap4

<div class="p-0 m-0">
</div>

注意：.p-0和.m-0已添加bootstrap.css

老丝阿飞2020/03/23 09:59:50

Bootstrap 4有一个本机类可以执行此操作：将类添加.no-gutters到父类.row

小胖Gil2020/03/23 09:59:50

仅当从其LESS源编译引导程序时，另一种可行的解决方案是重新定义用于设置列填充的变量。

您将在variables.less文件中找到该变量：称为@grid-gutter-width。

在源代码中是这样描述的：

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

将此设置为0，进行编译bootstrap.less，并包含结果bootstrap.css。大功告成如果您已经使用过像我一样的引导源，则可以用它作为定义其他规则的替代方法。

LEY猿2020/03/23 09:59:50

navbar表示，仅减少列上的填充不会成功，因为您将扩展页面的宽度，使其与其余页面不均匀。您需要同样减少行上的负边距。以@martinedwards的LESS为例：

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

泡芙猪猪2020/03/23 09:59:50

只需在bootstrap 3中添加内置类的“ no-padding”

伽罗2020/03/23 09:59:49

Bootstrap 4添加了.no-guttersclass。

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

如果希望媒体查询向上支持小型设备，则可以删除它的最大宽度部分。

十三2020/03/23 09:59:49

通常，您通常.row要包装两列，而不是包装两列.col-md-12。毕竟，.row没有a col-md-12会带来的额外的边距和填充，也没有折扣列将以负的左右边距引入的空间。

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer