Bootstrap第6栏图片问题

Question

现在，这是一个新项目，所以我需要一些帮助。

我有以下代码。请按全屏。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
 <head>
  <title>Stack Overflow Question</title>
  <link rel="stylesheet" type="text/css" href="bootstrap.css">
  <link rel="stylesheet" type="text/css" href="style/home.css">
  <!-- Reference to main CSS Style File-->
  <style>

  
  ul {
   margin:0 auto;
   border-top:2px solid #000;
   border-bottom: 2px solid #000;
   padding:10px;
   text-align: center;
   font-family:"montserratlight";
   text-transform: uppercase;
  }
  
  </style>
 </head>
 <body>
  <div class="container">

   <div id = "navigation">
    <p>
     <ul class="col-md-12"> 
      <!-- MAIN NENU BAR -->
      <li><a href="home.html" class="active"><b>Home</b></a></li>
      <li><a href="about.html">Why Does This</a></li>
      <li><a href="products.html">Not</a></li>
      <li><a href="contactUs.html">Work</a></li>
     </ul>
     <!-- Unordered lists.-->
    </p>
   </div>
   
   <div class = "row">
   <!-- Declaration of First Row -->
    <div class="imageHolder col-md-12 hvr-underline-from-center"> 
    <!-- Image Container as DIV -->
     <div class = "imageInside" >
      <img id = "imageHomeJPG" src="http://s30.postimg.org/8wav359r5/NYC.jpg" style="width:100%" />
     </div>
     <!-- Image Link -->
       </div> 
   </div>
   
   <div class="row">
    <div class="col-md-6">
      <a href="about.html">
      <img src = "http://s30.postimg.org/mehrfflwh/Place1.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
      </a>
    </div>
    <div class="col-md-6">
      <a href="about.html">
      <img src = "http://s30.postimg.org/iw5rj1l0h/Place2.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
      </a>
    </div>
   </div>
 </body>
 </html>

现在，展开后，这就是网站显示的内容。

但是，第 6 列的两张照片之间有一个小差距。

<div class="row" style="padding-right:0">
    <div class="col-md-6">
        IMAGE TAG 
    </div>
    <div class="col-md-6" style="padding-left:0">
        IMAGE TAG
</div>

这产生了以下 -

你可以看到左边的图片右边的大一些，所以是不正确的。我的问题是，如何在不需要更改填充的情况下使两列之间的间隙更小（到 10px 左右）？我想把图片调大一些来缩小差距，但是我好像找不到办法！

谢谢。

Answer 1

制作class :

no-space { 
       Width: 100% !important;
       Margin: 0px !important;
}

然后将此 class 放在 col-md-6 被 space 渗透评级的旁边，如下所示：

Class="col-md-6 no-space"

现在照片之间应该没有 space秒了。

Answer 2

为了真正解决这个问题，我还可以转到 Bootstrap CSS 文件并将 padding-left 和 padding-right 值编辑为相等的值.

原来两个值都设置在

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

但看看其他例子，比如 airBnb，它们的 padding 都设置为 12.5 所以这也是另一种解决方案。

Bootstrap第6栏图片问题

Bootstrap Column 6 Image Issue

html

css

margin

padding

twitter-bootstrap