html, body, .sidebar-container, .sidebar-row {
height: 100%;
}
.sidebar {
background-color: #2C3544;
}
@media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: #2C3544;
}
}
img{
margin: auto;
display: block;
}
.sidebar-image{
margin-top: 15px;
}
.sidebar-items{
margin-top: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid sidebar-container">
<div class="row sidebar-row">
<div class="col-md-2 sidebar">
<div class="container-fluid">
<div class="col-md-12 sidebar-image">
<img src="assets/logo-white.png" width="75px" height="75px"/>
</div>
</div>
<div class="row sidebar-items">
<div class="col-md-12">
<ul …所以我一直在这看起来永远无法弄明白.我有一个由于图像而具有不同高度内容的网格,我试图让它们全部对齐底部但没有运气.我已经尝试过我在这里看到的内容,但是在我的jsfiddle中评论过nope
我正在使用Bootstrap建立网站，现在正在尝试制作类似这样的内容：
===========================================================
| #################### |
| #################### Big Title |
| ##THIS IS AN IMAGE## |
| #################### |
| #################### Read more |
===========================================================
问题是我无法将ReadMore按钮对准底部。我尝试使用此SO解答中的提示，但无济于事。我在这里创建了代码的小提琴，并将代码粘贴到下面。
有人知道我在做什么错吗？欢迎所有提示！
我的HTML看起来像这样：
<div class="container">
<div class="row">
<div class="col-sm-8">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img class="img-responsive" src="image.png">
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
<div class="col-sm-4"><div class="row"></div></div>
</div>
</div>
和我的CSS：
@media (min-width: 768px ) {
.row …