将文本与引导网格中图像的底部内部对齐答案

【问题标题】：Align text to bottom inner part of image in bootstrap grid将文本与引导网格中图像的底部内部对齐
【发布时间】：2015-04-21 13:33:56
【问题描述】：

我需要在引导程序中有一个带有.rows 和.cols 的网格，这将是图像320x320，在这些图像中我需要带有深色背景和一些白色文本的放置文本，例如@987654321 @。

【问题讨论】：

标签： html css twitter-bootstrap vertical-alignment

【解决方案1】：

基本上你有一个带有“位置：相对；”的容器样式和页脚文本将具有“位置：绝对；底部：0；左侧：0”样式。要获得稍微透明的背景颜色，您可以使用 rgb(0,0,0,.5) ，其中 0.5 将是半透明（或不透明）。下面是你如何使用 bootstrap 3 来做到这一点。

HTML 看起来类似于：

<div class="container">
    <h1>stuff</h1>
    <p>Some stuff here</p>
        <div class='row'>
            <div class='col-xs-4'>
                <div class='img-container'>
                    <img src="http://a1.dspnimg.com/data/l/509084866423_rd0gX45i_l.jpg" alt="" />
                    <div class='img-footer'>
                        <p>Image Footer text</p>
                    </div>    
                </div>        
            </div>
            <div class='col-xs-4'>
                <div class='img-container'>
                    <img src="http://a1.dspnimg.com/data/l/509084866423_rd0gX45i_l.jpg" alt="" />
                    <div class='img-footer'>
                        <p>Image Footer text</p>
                    </div>    
                </div>        
            </div>
            <div class='col-xs-4'>
                <div class='img-container'>
                    <img src="http://a1.dspnimg.com/data/l/509084866423_rd0gX45i_l.jpg" alt="" />
                    <div class='img-footer'>
                        <p>Image Footer text</p>
                    </div>    
                </div>        
            </div>            
        </div>
    </div>            
</div>

而 Css 看起来像这样：

div[class^="col-"] {
    margin: 0 !important;
    padding: 0 !important;
    border: solid black 5px;
}

.img-container {
    position: relative;

}

.img-container img {
    height: 100%;
    width: 100%;
}

.img-container .img-footer {
    position: absolute;
    bottom: 0; left: 0;
    padding: 0 10px;   

    width: 100%;

    color: #fff;
    background: rgba(0,0,0,0.7);   
}

这是一个正在运行的 JSFiddle： https://jsfiddle.net/DTcHh/4498/

【讨论】：

【解决方案2】：

这里是一个很粗略的例子，但基本原理是设置overlay div为position: absolute;和bottom: 0;。这将强制元素位于其容器的底部，然后将背景颜色设置为 rgba 值以使其略微不透明：

.overlay {
    height: 100px;
    width: 320px;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
}

示例：http://www.bootply.com/5l6JQRaNdC

【讨论】：

这几乎是我想要的，但我还需要将正方形隔开20px，有什么办法吗？
这取决于您期望随着浏览器宽度的变化发生什么。
我希望它在宽时为 3 列，然后为 2，在移动时为 1 列。
图片的宽度如何？
理想情况下，它们会填充所述列的宽度，以及深色背景的文本。