html - 如何删除 Bootstrap 中不同列中两个 div 之间的空间

Question

我在我的元素中使用了一行和两列，我提供了问题的屏幕截图我想删除列中两个 div 之间的空间请帮助我 这是我的代码，我为我使用的列和我使用得很好的 col 列提供了不同的颜色，现在我想很好地连接这两个列，并删除它们之间的任何填充、边距或空格，我是如何实现这一点的

<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

Answer 1

您可以将新类添加到您的 div 元素并使用 css 删除 padding/margin。为了更清楚，bootstrap 为 .row 选择器和 分配 margin-left: -15px 和 margin-right: -15px padding-left: 15px 和 padding-right: 15px 在所有 .col-* 选择器上，在所有列之间获得 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;
}