如何删除bootstrap中两个网格之间的边距

Question

我想删除/折叠边距＆amp; bootstrap中两个网格列之间的填充。这是我的代码和截图。

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

Answer 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以覆盖它。

Answer 2

在bootstrap中，预定义的类（如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;}

如果它没有覆盖bootstrap css，那么你只需添加后缀到css属性，如

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