删除引导程序中图像之间的奇怪空间答案

【问题标题】：Remove weird space between images in bootstrap删除引导程序中图像之间的奇怪空间
【发布时间】：2017-01-02 21:10:14
【问题描述】：

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

HTML

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

CSS

.paddingbottom
{
  padding-bottom: 10px;
}

输出

【问题讨论】：

把这个：<div class="row paddingbottom">改成这个：<div class="row">
你的意思是什么间距？垂直、水平还是两者兼而有之？
@manikKhurana 这些答案对您有帮助吗？如果是，请标记为正确 :) 我想你想看看这个游览，看看堆栈是如何工作的。 stackoverflow.com/tour

标签： html css image twitter-bootstrap-3

【解决方案1】：

请尝试下面的代码，它会解决问题，

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

【讨论】：

这行得通，谢谢！你介意向我解释一下为什么这样有效吗，这是输出，只需要在图像之间添加一些填充。
@manik khurana 我减小了列的大小并将第一列移动了 3 个偏移量以使图像居中对齐，即 3 列偏移量 + 6 列图像 + 右侧 3 列 =12 列

【解决方案2】：

将内边距设置为 0px。 ".row div{padding: 0;}"

【讨论】：

【解决方案3】：

如果您指的是图像之间的水平间距，那是因为 Bootstrap 使用 12 列布局网格。您的图像仅占用 9 列（3 x 3Column div）。只需将 3 个容器 div 的类更改为“col-md-4”即可。

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

【讨论】：

【解决方案4】：

发生这种情况是因为您正在使用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>

【讨论】：

【解决方案5】：

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

.paddingbottom
 {
  padding: 0%;
  }

【讨论】：