我试图在我的 Div 缩略图的底部添加一行,但我似乎无法正确添加,也找不到有效的答案。
<div class="item col-lg-4">
<div class="thumbnail">
<div class="caption">
<h4 class="list-group-item-heading"><?php echo $row["name"]; ?></h4>
<p class="list-group-item-text"><img style="width: 100%; padding-bottom: 10px;" border="0" src="<?php echo $row["description"]; ?>"></p>
<div class="row">
<div class="col-md-6 ">
<p class="lead"><?php echo '€'.$row["price"].' EURO'; ?></p>
</div>
<div class="col-md-6 ">
<a class="btn btn-success" href="cartAction.php? action=addToCart&id=<?php echo $row["id"]; ?>">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
如果你把它放在一个普通的代码中,它很可能根本不会返回任何东西。因为它从 sql 数据库获取信息。但它会返回这样的东西:
|================| |================|
| picture | | picture |
| | | |
| - | | - |
| | but i want it to be like. | |
| price, button | | |
| | | |
| | | |
| | | |
| | | price, button |
|================| |================|
问题是。向该行添加一个额外的类并给它 vallign 底部,或者只是 bottom: 0px;
不起作用。
大窗体是缩略图,价格和按钮排成一排。所以你知道那个表格是什么可能是有用的信息。
抱歉英语不好,不是我的母语。 如果这个答案很明显,我真的很抱歉,但我是 bootstrap 的新手。
最佳答案
这可能是您需要的:
.thumbnail {
position: relative;
height: 300px; /* Replace with your desired thumbs height */
}
.row-bottom {
position: absolute;
bottom: 0;
width: 100%;
}
检查 this example
关于html - 我如何在 Thumbnail Bootstrap 的底部放置一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40524385/