Question

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

问题是。在行中添加一个额外的类并将其置于底部，或仅bottom: 0px;不起作用。

大表格是缩略图，价格和按钮是连续的。所以你知道那种形式可能是有用的信息。

抱歉英语不好，不是我的母语。如果这个答案显而易见，我真的很抱歉，但我是新手。

Answer 1

这可能是您所需要的：

.thumbnail {
    position: relative;
    height: 300px; /* Replace with your desired thumbs height */
 }

.row-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}

检查this example

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

1 个答案: