如何使用Bootstrap将两个图像对齐在同一行上，两者之间没有空格

Question

我有两张图片，我想与bootstrap放在同一行。

这是图像之一

这是Image Two

基本上我想用bootstrap实现的是这个

这是我到目前为止使用的代码

<div class="row"> 


<div class="col-md-12">
<img name="iimajinnewworkedon_r4_c1" src="http://i.imgur.com/Fkg67Ng.jpg" width="815" height="456" id="iimajinnewworkedon_r4_c1" alt=""  class="img-responsive"/>


</div>


<div class="col-md-4">

<img src="http://i.imgur.com/iKa3nvy.jpg" width="465" height="456"  alt=""  class="img-responsive"/>
   </div>

</div>

问题： 当我使用该代码时，它不是在没有空格的同一行上显示图像，而是显示两个图像，但它们之间有很宽的空间。

如何删除两个图像之间的空间？

  

A demo of my code can be seen here和a Jsfiddle here

Answer 1

将两个图像放入一个带有col-md-12的div中，并在每个图像上添加bootstrap 3类“pull-left”

Answer 2

我有几乎相同的情况，并且能够通过修改填充值来解决它。

在你的情况下，解决方案将是;

1. 将 col-md-12 更改为 col-md-8 （Bootstrap网格12 cols =宽度100％）
2. 图片代码（img）不应具有宽度和高度属性
3. 修改填充值。

更正了HTML

<div id="unique-name" class="row">
<div class="col-md-12">
    <img name="iimajinnewworkedon_r4_c1" src="http://i.imgur.com/Fkg67Ng.jpg" id="iimajinnewworkedon_r4_c1" alt="" class="img-responsive" />
</div>

<div class="col-md-4">
    <img src="http://i.imgur.com/iKa3nvy.jpg" alt="" class="img-responsive" />
</div>

将以下内容添加到CSS文件中

#unique-name img {
    padding-left:0px;
    padding-right:0px;
    /* Modifiying the below lines would help you achieve same height for the 2 columns */
    /*padding-top: 5px;*/
    /*padding-bottom: 5px;*/
}

Answer 3

将类值更改为它们的int sum match 12，因为它是自举网格列数。

正如@maraca所说的用col-xs和col-sm进行实验。

使用萤火虫或类似的东西来查看是什么让你的div嘀嗒。

Answer 4

您需要在列中添加填充：0以消除间隙。

Answer 5

Bootstrap.min.css正在将填充应用于col-md-x类。

  padding-right: 15px;
  padding-left: 15px;

添加一个覆盖它的新类

<div class="col-md-8 your-new-class">

CSS：

.your-new-class{
    padding-left:0px;
    padding-right:0px;
}

然后看起来你需要以类似的方式移除图像边框。这些应该在bootstrap之后引用的单独的.css文件中。