如何在 Bootstrap 的不同列中删除两个 div 之间的空间答案

【问题标题】：how remove space between two div in different columns in Bootstrap如何在 Bootstrap 的不同列中删除两个 div 之间的空间
【发布时间】：2018-04-25 08:00:59
【问题描述】：

我在项目中使用了一行和两列，我提供了问题的屏幕截图，我想删除列中两个 div 之间的空格，请帮助我这是我的代码，我给我使用的列和里面的列赋予了不同的颜色，现在我想很好地加入这两个并删除它们之间的任何填充或边距或空间我如何实现这一目标

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">
	     <div class="row">
		<div class="col-md-3" style="background-color:green;">
          <div class="well well-lg" style="margin-top:10px;">
			<img src="admin.png" class="img-responsive img-thumbnail" width="70" 
            height="50"> <span style="font-size: 20px;"> Admin Name</span>
				</div>
	
			</div>

		<div class="col-md-9" style="background-color:red;">
			<div class="well well-lg" style="margin-top:10px;">
					<h2 style="text-align: center;">Welcome to Admin Panle</h2>
					
				</div>

		</div>
	 </div>
       </div>

this is screen shot of mu project

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可以将新类添加到 div 元素并使用 css 删除 padding/margin。为了更清楚，引导程序为.row 选择器分配margin-left: -15px 和margin-right: -15px，并在所有.col-* 选择器上分配padding-left: 15px 和padding-right: 15px，以获得所有列之间的30px 空间。要删除此空间，您必须将边距和填充的这些值设置为零。这是你可以做到的。

试试这个代码。

<div class="container-fluid">
    <div class="row no-gutter">
        <div class="col-md-3" style="background-color:green;">
            <div class="well well-lg" style="margin-top:10px;"> <img src="admin.png" class="img-responsive img-thumbnail" width="70" 
        height="50"> <span style="font-size: 20px;"> Admin Name</span> </div>
        </div>
        <div class="col-md-9" style="background-color:red;">
            <div class="well well-lg" style="margin-top:10px;">
                <h2 style="text-align: center;">Welcome to Admin Panle</h2>
            </div>
        </div>
    </div>
</div>

.row.no-gutter {
margin-left: 0;
margin-right: 0;
}

.row.no-gutter > div[class*="col-"] {
padding-left: 0;
padding-right: 0;
}

【讨论】：

Aryan Twanju 谢谢它的工作原理你能详细解释一下吗
我在回答中添加了完整的细节。看看吧。

【解决方案2】：

删除列上的填充的更好方法是在 .row 中添加一个 .no-pad 类：

 <div class="row no-pad">
...and then add this CSS.

.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

我建议你使用 Bootstrap 4，因为 Bootstrap 4 现在包含一个 .no-gutters 类，您可以添加到 .row 中。

  <div class="row no-gutters">
      <div class="col">x</div>
      <div class="col">x</div>
      <div class="col">x</div>
  </div>

引导程序 4：http://www.codeply.com/go/OBW3RK1ErD

【讨论】：