我无法尝试将每个div中的按钮“ .inductees ”放在底部。在通过javascript加载文档之后设置div的高度，jsfiddle采用最大高度并将其余部分设置为等于它。因此，我的问题是如何让它到底。我尝试了几种方法，但它们都破坏了Bootstrap列。
{{3}}
CSS
.inductees {
margin-bottom: 50px;
padding-bottom: 10px;
background-color: #FFF;
}
.inductees .info-text {
color: #494743;
padding: 10px;
}
.center {
text-align: center;
}
HTML
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div style="height: 611px;" class="inductees">
<img alt="Shelmer Doyle Blackburn J" src="http://placehold.it/600x700" class="img-responsive">
<div class="info-text">
<p class="name">Shelmer Doyle Blackburn Jr.</p>
<ul class="list-unstyled">
<li>Year Inducted: 2014</li>
<li>Blackburn established The Blackburn Family Foundation Charitable Organization. He is the former Chairman of Adult Enrichment Services of Wilkes County and was instrumental in the establishment of the Ruby Pardue Blackburn Adult Day Care.</li>
</ul>
</div>
<div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div style="height: 611px;" class="inductees">
<img alt="Zachary Knight Galifianakis" src="http://placehold.it/600x700" class="img-responsive">
<div class="info-text">
<p class="name">Zachary Knight Galifianakis</p>
<ul class="list-unstyled">
<li>Year Inducted: 2014</li>
<li>Galifianakis’ career began on television, and he currently thrives in the film industry as an award-winning supporting actor.</li>
</ul>
</div>
<div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div style="height: 611px;" class="inductees">
<img alt="Shelmer Doyle Blackburn J" src="http://placehold.it/600x700" class="img-responsive">
<div class="info-text">
<p class="name">Shelmer Doyle Blackburn Jr.</p>
<ul class="list-unstyled">
<li>Year Inducted: 2014</li>
<li>Blackburn established The Blackburn Family Foundation Charitable Organization. He is the former Chairman of Adult Enrichment Services of Wilkes County and was instrumental in the establishment of the Ruby Pardue Blackburn Adult Day Care.</li>
</ul>
</div>
<div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div style="height: 611px;" class="inductees">
<img alt="Zachary Knight Galifianakis" src="http://placehold.it/600x700" class="img-responsive">
<div class="info-text">
<p class="name">Zachary Knight Galifianakis</p>
<ul class="list-unstyled">
<li>Year Inducted: 2014</li>
<li>Galifianakis’ career began on television, and he currently thrives in the film industry as an award-winning supporting actor.</li>
</ul>
</div>
<div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>
</div>
</div>
</div>
</div>
</div>
有什么建议吗？
答案 0 :(得分：1)
您可以添加另一个绝对定位按钮父div的类。然后设置底部：0，宽度100％以允许仍然居中。
例如：
.alignBottom {
position:absolute;
bottom: 0;
width: 100%;
}
JSFiddle在这里看到它正常工作：
答案 1 :(得分：1)
你只需要添加2个css
.inductees{
position:relative;
}
.inductees .btn{
position:absolute;
bottom:15px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
}
答案 2 :(得分：0)
您正在关闭按钮后的inductee信息文本div标签，因此该按钮在顶部分层。
确保文本div与按钮分开。这是更新版本，编辑信息文本div和按钮div的边距和填充以使它们居中。但这回答了你的问题。
HTML：
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div style="height: 611px;" class="inductees">
<img alt="Shelmer Doyle Blackburn J" src="http://placehold.it/600x700" class="img-responsive">
<div class="info-text">
<p class="name">Shelmer Doyle Blackburn Jr.</p>
<ul class="list-unstyled">
<li>Year Inducted: 2014</li>
<li>Blackburn established The Blackburn Family Foundation Charitable Organization. He is the former Chairman of Adult Enrichment Services of Wilkes County and was instrumental in the establishment of the Ruby Pardue Blackburn Adult Day Care.</li>
</ul>
</div>
</div>
<div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div style="height: 611px;" class="inductees">
<img alt="Zachary Knight Galifianakis" src="http://placehold.it/600x700" class="img-responsive">
<div class="info-text">
<p class="name">Zachary Knight Galifianakis</p>
<ul class="list-unstyled">
<li>Year Inducted: 2014</li>
<li>Galifianakis’ career began on television, and he currently thrives in the film industry as an award-winning supporting actor.</li>
</ul>
</div>
</div>
<div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a> </div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div style="height: 611px;" class="inductees">
<img alt="Shelmer Doyle Blackburn J" src="http://placehold.it/600x700" class="img-responsive">
<div class="info-text">
<p class="name">Shelmer Doyle Blackburn Jr.</p>
<ul class="list-unstyled">
<li>Year Inducted: 2014</li>
<li>Blackburn established The Blackburn Family Foundation Charitable Organization. He is the former Chairman of Adult Enrichment Services of Wilkes County and was instrumental in the establishment of the Ruby Pardue Blackburn Adult Day Care.</li>
</ul>
</div>
</div>
<div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div style="height: 611px;" class="inductees">
<img alt="Zachary Knight Galifianakis" src="http://placehold.it/600x700" class="img-responsive">
<div class="info-text">
<p class="name">Zachary Knight Galifianakis</p>
<ul class="list-unstyled">
<li>Year Inducted: 2014</li>
<li>Galifianakis’ career began on television, and he currently thrives in the film industry as an award-winning supporting actor.</li>
</ul>
</div>
</div>
<div class="center"><a href="#"><button class="btn btn-primary btn-lg">See More</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
CSS：
.wrapper {
background-color: black;
width: 100%;
overflow:auto;
padding: 20px 0;
}
.inductees {
margin-bottom: 50px;
padding-bottom: 10px;
background-color: #FFF;
}
.inductees .info-text {
color: #494743;
}
.center {
vertical-align:center;
text-align: center;
margin-top:0;
margin-bottom:10px;
}
.center button {height:100%;}