如何在引导程序中删除两个网格之间的边距答案

【问题标题】：How to remove margin between two grids in bootstrap如何在引导程序中删除两个网格之间的边距
【发布时间】：2016-03-18 02:50:09
【问题描述】：

我想删除/折叠引导程序中两个网格列之间的边距和填充。这是我的代码和屏幕截图。

<div class="col-md-6">
    <div class="form-group">
        <label class="col-md-3 control-label">Short Name</label>
        <div class="col-md-8">
            <input id="txtShortName" class="form-control " type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">Descripition</label>
        <div class="col-md-8">
            <input id="txtDescripition" class="form-control" type="text"  />
        </div>     
    </div>        
</div>

【问题讨论】：

请提供小提琴。

标签： html css twitter-bootstrap-3

【解决方案1】：

在您的 Bootstrap CSS 中找到以下代码，并根据需要更改 padding。

position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;

上面的代码将在 .col-xx-y 下，其中 xx 是 md,sm,lg 等，y 是 1,2,3 等等..

注意：如果您在引导 CSS 中进行更改，它将对您的每个 HTML 文件生效。所以我建议您制作自定义 CSS 来覆盖它。

【讨论】：

【解决方案2】：

在引导程序中，像col-md-3 和col-md-8 这样的预定义类采用默认的padding-left:15px; 和padding-right:15px;，这样您就可以在form-group 旁边多提供一个类，并将这两个col 类定位到您的css您编写了自定义 css 并将填充设置为 0，或者我们可以说只是覆盖它。

请按照下面的编辑代码。

<div class="col-md-6">
    <div class="form-group Myform">
       <label class="col-md-3 control-label">Short Name</label>
         <div class="col-md-8">
           <input id="txtShortName" class="form-control " type="text" />
         </div>
     </div>

     <div class="form-group Myform">
        <label class="control-label col-md-3">Descripition</label>
         <div class="col-md-8">
           <input id="txtDescripition" class="form-control" type="text"  />
         </div>
     </div>
 </div>

请将下面的 css 添加到您的自定义 css 文件中

.Myform .col-md-3, .Myform .col-md-8 {padding-left:0;padding-right:0;}

如果它没有覆盖引导 css，那么您可以简单地为 css 属性添加后缀，例如

.Myform .col-md-3, .Myform .col-md-8 {padding-left:0 !important;padding-right:0 !important;}

【讨论】：