[英]Bottom-align grid elements in bootstrap fluid layout issue
I found in a thread a way to Bottom-align grid elements in bootstrap : 我在一个线程中找到了一种在bootstrap中使网格元素底部对齐的方法:
How do I bottom-align grid elements in bootstrap fluid layout 如何在自举流体布局中底部对齐网格元素
On last anwser the guy say that I can do it this way and link to a fiddle 最后一个家伙说我可以这样做,并链接到一个小提琴
Link to the fiddle : http://jsfiddle.net/silb3r/0srp42pb/11/ 链接到小提琴: http : //jsfiddle.net/silb3r/0srp42pb/11/
I tried but I can't figure out what I did wrong, here my code : 我试过了,但是我找不到我做错了什么,这里是我的代码:
HTML: HTML:
<div class="row rowMidle">
<div class="col-md-3">
<div id="leftTown"><img src="images/TownLeft.png" height="100%" width="100%"></div>
</div>
<div class="col-md-1">
<div id="char1"><img src="images/char1.png" height="100%" width="100%"></div>
</div>
<div class="col-md-1">
<div id="char2"><img src="images/char2.png" height="70%" width="70%"></div>
</div>
<div class="col-md-1">
<div id="char3"> <img src="images/char3.png" height="80%" width="80%"></div>
</div>
<div class="col-md-3">
<div id="paneau"><img src="images/EditGetElement.png" height="100%" width="100%"></div>
</div>
<div class="col-md-3">
<div id="leftTown"><img src="images/towright.png" height="100%" width="100%"></div>
</div>
</div>
CSS: CSS:
.rowMidle > * {
float: none;
display: inline-block;
}
.rowMidle > *:last-child {
vertical-align: bottom;
}
Here you can check it online, to see the issue by yourself: http://goldiman.alwaysdata.net/ 在这里您可以在线检查它,自己查看问题: http : //goldiman.alwaysdata.net/
Thank you Best regards Goldiman 谢谢问候戈尔德曼
Try this css: 试试这个CSS:
.row.rowMidle {
margin-top: 500px;
}
.row.rowMidle > div > div {
vertical-align: bottom;
position: absolute;
bottom: 0;
}
remove float:none;
删除float:none;
from .rowMidle > *
来自.rowMidle > *
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.