删除bootstrap中图像之间的奇怪空间

Question

下面的代码显示了一个简单的图像网格，但是我不想要间距，如何删除它？ 第一个块是我的html，第二个是我的css，第三​​个是输出。

HTML

.paddingbottom
{
  padding-bottom: 10px;
}

CSS

SimpleStringProperty

输出

Answer 1

将填充设置为0px。 ＆＃34; .row div {padding：0;}＆＃34;

Answer 2

如果你的意思是图像之间的水平间距，那是因为Bootstrap使用了12列布局网格。你的图像只需要9列（3 x 3列div）。 只需将3个容器div的类更改为＆＃39; col-md-4＆＃39;。

<div class="container">
    <div class="row paddingbottom">
    <div class="col-md-4"><a href="#"><img src="images/fb_edit.png"></a></div>
    <div class="col-md-4"><a href="#"><img src="images/tw_edit.png"></a></div>
    <div class="col-md-4"><a href="#"><img src="images/yt_edit.jpeg"></a></div>
</div>

Answer 3

这种情况正在发生，因为您使用col-md-offset-1会在图片中创建1个列空间，所以只需删除它就可以了。

<强> From bootstrap page

  

抵消列

     

使用.col-md-offset- *向右移动列   类。这些类增加了列的左边距*   列。例如，.col-md-offset-4将.col-md-4移动到四个以上   列。

<div class="container">
<div class="row paddingbottom">
    <div class="col-md-3 "><a href="#"><img src="images/fb_edit.png"></a></div>
    <div class="col-md-3 "><a href="#"><img src="images/tw_edit.png"></a></div>
    <div class="col-md-3"><a href="#"><img src="images/yt_edit.jpeg"></a></div>
</div>

Answer 4

请尝试以下代码，它将解决问题，

<div class="col-xs-12 col-md-2 col-md-offset-3"><img src="images/tw_edit.png"></div>
<div class="col-xs-12 col-md-2"><img src="images/tw_edit.png"></div>
<div class="col-xs-12 col-md-2"><img src="images/tw_edit.png"></div>

Answer 5

尝试减少.row paddingbottom:的分割宽度并给出

.paddingbottom
 {
  padding: 0%;
  }