html - Bootstrap 响应式图像对齐底部

Question

在下面的 fiddle 中，我希望 275x275 图像与行的底部对齐:

https://jsfiddle.net/2n2x2bko/

<div class="container">
  <div class="row">
    <div class="col-md-12"><img class="img-responsive logo center-block" src="http://placehold.it/100x100" /></div>
  </div>
  <div class="row">
    <div class="col-md-4">Work</div>
    <div class="col-md-4">About</div>
    <div class="col-md-4">Contact</div>
  </div>
  <div class="row">
    <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/600x575"></div>
    <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/275x275"></div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-6">App</div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-3">App</div>
    <div class="col-md-3">App</div>
  </div>
</div>

似乎没有与 .center-block 等效的垂直对齐方式，有什么想法吗？

Answer 1

Bootstrap v3 中没有任何垂直对齐元素的类，但您可以使用以下解决方案来实现您想要的情况。

1. display:inline-block;.( don't forget to remove spaces ) Jsfiddle

[class*=valign-] [class*=col] {
  display: inline-block;
  float: none;
}

[class=valign-top] [class*=col] {
  vertical-align: top;
}

[class=valign-middle] [class*=col] {
  vertical-align: middle;
}

[class=valign-bottom] [class*=col] {
  vertical-align: bottom;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12"><img class="img-responsive logo center-block" src="http://placehold.it/100x100" /></div>
  </div>
  <div class="row">
    <div class="col-md-4">Work</div>
    <div class="col-md-4">About</div>
    <div class="col-md-4">Contact</div>
  </div>
  <div class="row valign-bottom">
    <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/600x575"></div><div class="col-md-6"><img class="img-responsive bottom-img" src="http://placehold.it/275x275"></div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-6">App</div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-3">App</div>
    <div class="col-md-3">App</div>
  </div>
</div>

1. 显示:flex; Jsfiddle

[class*=valign-bottom"]{
 display: flex;
align-items:flex-end;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12"><img class="img-responsive logo center-block" src="http://placehold.it/100x100" /></div>
  </div>
  <div class="row">
    <div class="col-md-4">Work</div>
    <div class="col-md-4">About</div>
    <div class="col-md-4">Contact</div>
  </div>
  <div class="row valign-bottom">
    <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/600x575"></div>
    <div class="col-md-6"><img class="img-responsive bottom-img" src="http://placehold.it/275x275"></div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-6">App</div>
  </div>
  <div class="row">
    <div class="col-md-6">App</div>
    <div class="col-md-3">App</div>
    <div class="col-md-3">App</div>
  </div>
</div>