html - 将文本对齐到 Bootstrap 网格中图像的底部内部

Question

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

Answer 1

基本上你会有一个带有“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/