在 bootstrap 网格中将文本与图像的底部内部对齐

Question

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

Answer 1

这里举个很粗略的例子，但基本原理是将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

Answer 2

基本上，您将拥有一个具有 "position: relative;" 样式的容器，而页脚文本将具有 "position: absolute; bottom: 0; left: 0" 样式。要获得稍微透明的 bg 颜色，您可以使用 rgb(0,0,0,.5)，其中 .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/

在 bootstrap 网格中将文本与图像的底部内部对齐

Align text to bottom inner part of image in bootstrap grid

html

css

vertical-alignment

twitter-bootstrap