Question

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

＆＃13;

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

＆＃13;

this is screen shot of mu project

Answer 1

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

试试这段代码。

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

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

Bootstrap 4：http://www.codeply.com/go/OBW3RK1ErD

如何删除bootsrtap中不同列中两个div之间的空格

2 个答案: