在Twitter Bootstrap中对齐响应图像

Question

我正在尝试在我的网站上对齐占据两列的图像。不幸的是，我无法实现理想的结果。下面我粘贴了一个可以用语言更好地解释问题的bootply：

http://www.bootply.com/VLI1jrLYp9

我希望图像始终在底部对齐，但目前较大的图像总是比右边的图像组短。在它们的自然尺寸下，图像的高度相同。

请注意，我已从行中移除了最外面的排水沟。但是，即使排水沟到位，图像仍然没有在底部对齐。

我必须遗漏一些简单的东西，但请指出给我。

谢谢！

Answer 1

除非列的所有边上的填充相同，否则图像将以不同的视觉尺寸显示。这里有一个很好的调整，这是一个例子。

DEMO：http://jsbin.com/zayiye/1/

http://jsbin.com/zayiye/1/edit?html,css,output

<强> CSS：

/* demo only */
body {
    /*newer ie covers up content unless this is included*/
    -ms-overflow-style: scrollbar;
}
.full-width {
    padding: 0;
}
/* Flush Grid */
.row.flush-grid {
    overflow: hidden;
    margin-right: 0;
    margin-left: 0;
}
.row.flush-grid [class*="col-"].row {
    padding: 0;
    margin: 0;
}
.row.flush-grid [class*="col-"] {
    padding: 0;
    margin-bottom:-1px;
}
.row.flush-grid img {
    width: 100.5%;
    height: auto;
}
@media (min-width:768px) { 
    [class*="col-"].first {
        margin-bottom: 0
    }
    [class*="col-"].last {
        margin-top: 0
    }
    .row.tight-grid [class*="col-"] {
        padding: 0px
    }
    .row.tight-grid [class*="col-"].row {
        padding: 0;
        margin: 0;
    }
}

<强> HTML

<div class="container-fluid full-width">
   <div class="row flush-grid">
      <div class="col-sm-6">
         <img src="http://lorempixel.com/600/400/fashion" alt="">
      </div>
      <div class="col-sm-6 row">
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/nature" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/food" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/cats" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/business" alt="" ></div>
      </div>
   </div>
   <!--/.row.flush-grid -->
   <div class="row flush-grid">
      <div class="col-sm-6 row">
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/animals" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/city" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/people" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/sports" alt="" ></div>
      </div>
      <!--/.row.flush-grid -->
      <div class="col-sm-6">
         <img src="http://lorempixel.com/600/400/transport" alt="">
      </div>
   </div>
   <!--/.row.flush-grid -->
</div>
<!--/.container-fluid full-width-->