在Twitter Bootstrap中对齐响应图像

Question

我正在尝试对齐在我的网站上占据一排两列的图片。不幸的是，我无法取得预期的结果。下面我贴了一个用文字解释这个问题比我能更好地解释这个问题的引导：

http://www.bootply.com/VLI1jrLYp9

我希望图像在任何时候都在底部对齐，但是现在更大的图像总是比右边的图像组短。在它们的自然大小，图像是相同的高度。

请不要说我把最外面的排水沟从那排里移开了。然而，即使在排水沟的位置，图像仍然没有对齐在底部。

我一定是错过了一些很简单的东西，但请指出给我看。

谢谢!

Answer 1

除非填充在列的所有侧面相同，否则图像将以不同的可视大小出现。有一个很好的调整，这里有一个例子。

演示：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;
    }
}

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