时间戳

首页 > 解决方案 > 如何在 Bootstrap 的不同列中删除两个 div 之间的空间

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

问题描述

我在我的项目中使用了一行和两个列，我提供了问题的屏幕截图我想删除列中两个 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>

这是 mu 项目的屏幕截图

标签： htmlcsstwitter-bootstrap

解决方案

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

试试这个代码。

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

推荐阅读