html - 我如何在 Thumbnail Bootstrap 的底部放置一行

标签 html css twitter-bootstrap position

我试图在我的 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/

相关文章:

javascript - Bootstrap Datepicker 未加载

html - bootstrap well 在小屏幕上显示多行

html - 高度可变的 div 内垂直对齐多个跨度(ui-select-multiple)

html - 媒体查询根本不起作用

php - PHP邮件功能无法完成电子邮件的发送

php - UTF-8 内容类型元标记会减慢页面加载速度,为什么?

html - 如何使用翻转图像完成此垂直导航栏?

jquery - 使用 Bootstrap 列固定的位置

jquery - 即使在使用边框 : none; 后也无法删除导航栏和下拉菜单之间的空间

javascript - 显示所有移动设备的警报