在bootsrap4或css

Question

我使用css align-xxxx：底部不工作，我希望图像不同高度对齐底部全部

＆＃13;

＆＃13;

.width-book{
  width: 100px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
     <div class="container">
        <div class="row">
        	<div class="col-xs-4 text-center">
        		<a href="">
        			<figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        			<img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
        		</a>
        	</div>
        	<div class="col-xs-4 text-center">
        		<a href="">
        			<figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        			<img class="a width-book" src="http://prodimage.images-bn.com/pimages/9780553805444_p0_v5_s1200x630.jpg" data-holder-rendered="true">
        		</a>
        	</div>
        	<div class="col-xs-4 text-center">
        		<a href="">
        			<figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        			<img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
        		</a>
        	</div>
        </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

我想结果 image

Answer 1

在col-xs-4中提供自己的课程并给出此css

.book{
  align-self:end;
}

.width-book{
  width: 100px;
}
.book{
  align-self:end;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
     <div class="container">
        <div class="row">
        	<div class="col-xs-4 text-center book">
        		<a href="">
        			<figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        			<img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
        		</a>
        	</div>
        	<div class="col-xs-4 text-center book">
        		<a href="">
        			<figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        			<img class="a width-book" src="http://prodimage.images-bn.com/pimages/9780553805444_p0_v5_s1200x630.jpg" data-holder-rendered="true">
        		</a>
        	</div>
        	<div class="col-xs-4 text-center book">
        		<a href="">
        			<figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        			<img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
        		</a>
        	</div>
        </div>
        </div>

Answer 2

使用flex css：

.wrapper {
  position: relative;
  height: 500px;
  width: 1000px;
  display: flex;
  align-items: flex-end;
}

示例：https://codepen.io/Czeran/pen/yPeGwO

Answer 3

问题是你的内容包含在＆＃34; a＆＃34;元件。这是你真正需要设计的款式。 一种简单的方法是添加课程＆＃34; book＆＃34;每个＆＃34; a＆＃34;元素和这对你的css：

a.book {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    align-items: center;
}

这将为您提供您正在寻找的结果。