Bootstrap缩略图linear-gradient布局异常求助：渐变溢出、边框未铺满

针对你遇到的两个问题，直接给出修复方案：

1. 修复渐变溢出图片右侧的问题 #

绝对定位的.card__content未限制宽高范围，导致超出图片宽度。修改CSS如下：

.card__content {
    position: absolute;
    bottom: 0; /* 固定在图片底部 */
    left: 0;
    right: 0; /* 左右对齐父容器，贴合图片宽度 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    border-bottom-left-radius: 6px; /* 匹配img-rounded的圆角值，避免渐变漏出圆角外 */
    border-bottom-right-radius: 6px;
    padding: 15px 20px; /* 添加内边距，让文字不贴边 */
    color: #fff; /* 设置文字为白色，提升可读性 */
}

2. 修复thumbnail边框无法铺满区块的问题 #

图片的align="left"属性会触发浮动，导致父容器.thumbnail高度塌陷，边框无法撑开。修改HTML中的img标签，移除align="left"：

<img src="1.jpg" class="img-rounded img-responsive">

另外两个图片标签做同样修改即可。

修改后的完整代码示例 #

CSS #

.card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 15px 20px;
    color: #fff;
}

HTML #

<body>
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 thumb">
            <div class="thumbnail" style="position:relative;">
                <img src="1.jpg" class="img-rounded img-responsive">
                <div class="card__content">
                    <h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
                </div>   
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-12 thumb">
            <div class="thumbnail" style="position:relative;">
                <img src="2.jpg" class="img-rounded img-responsive">
                <div class="card__content">
                    <h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-12 thumb">
            <div class="thumbnail" style="position:relative;">
                <img src="3.jpg" class="img-rounded img-responsive">
                <div class="card__content">
                    <h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

内容的提问来源于stack exchange，提问作者AstFreelancer