Question

在下面的小提琴中，我希望275x275图像与行的底部对齐：

timeFull = soup.find("div",{"class": "small-text"}).find("small", {"class": None})
print(timeFull.text)

似乎没有相当于.center-block的垂直对齐，任何想法？

Answer 1

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

display:inline-block;。（don't forget to remove spaces）Jsfiddle

＆＃13;

[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;
}

＆＃13;

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

＆＃13;

display: flex; Jsfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

一种方法是使图像元素相对于其父行。因此，将图像行更改为：

<div class="row alignRow">
   <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/600x575"></div>
   <div class="col-md-6 alignImage"><img class="img-responsive bottom-img" src="http://placehold.it/275x275"></div>
</div>

并添加此css：

.alignRow {
    position: relative;
 }
.alignImage {
    position: absolute;
    bottom: 0;
    right: 0;
 }

请注意，这将使其siblimg图像的对齐变得混乱，因此最好的方法是使它们都是绝对的，然后指定一些宽度值。

查看更新的jsfiddle：here

Bootstrap响应图像对齐底部

2 个答案: