按钮需继承父div宽度：产品盒底部响应式按钮布局求助

我看了你的代码，问题主要出在两个地方：绝对定位的容器没有正确参照父元素，以及按钮本身没有设置自适应宽度。咱们一步步来修复：

问题分析 #

1. .pro-box未设置相对定位：你的.btn-group用了position: absolute，但它的父容器.pro-box没有position: relative，这会导致.btn-group相对于上层的.col-lg-3定位，而不是产品盒本身，所以width:100%会超出产品盒的内边距范围。
2. 按钮没有自适应宽度：三个按钮默认是inline-block属性，不会自动平分父容器宽度，没法实现铺满底部的效果。

修改后的完整代码 #

CSS 部分

.pro-box{
 height: 416px;
 overflow-y: hidden;
 padding: 6px 6px 0 6px;
 background-color: #4dbaef;
 color: #fff;
 position: relative; /* 添加相对定位，让子元素绝对定位以它为参照 */
}
.pro-box>img{
 display: block;
 margin: 0 auto;
 margin-bottom: 15px;
 background-color: #fff;
 width: 100%;
 height: 242px;
}
.btn-pro{
 text-transform: uppercase;
 letter-spacing: 1px;
 font-family: 'Roboto Regular', sans-serif;
 font-size: 13px;
 background-color: #339dd1;
 border-radius: 0;
 color: #fff;
 padding: 12px;
 margin-right: 2px;
 transition: 0.3s;
 width: calc(33.333% - 2px); /* 平分父容器宽度，减去右侧margin避免换行 */
 box-sizing: border-box; /* 确保padding不会额外增加宽度 */
}
/* 最后一个按钮去掉右侧margin，消除多余间隙 */
.btn-pro:last-child{
 margin-right: 0;
}
.pro-box>.btn-group{
 position: absolute;
 bottom: 20px;
 left: 6px; /* 匹配产品盒的左内边距 */
 right: 6px; /* 匹配产品盒的右内边距，替代width:100%更精准 */
 display: flex; /* 用flex布局让按钮自动排列，兼容性更好 */
}

HTML 部分（结构无需改动）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-3">
 <div class="pro-box">
 <img src="http://via.placeholder.com/300" alt="" class="img-responsive">
 <h4 class="pro-name">MAQ03422</h4>
 <p class="pro-desc">Titanium Delicate Touch Microvascular Needle Holders Needle Holders and Passers</p>
 <div class="btn-group" role="group">
 <a href="#" class="btn btn-pro">Tray</a>
 <a href="#" class="btn btn-pro">cart</a>
 <a href="#" class="btn btn-pro">compare</a>
 </div>
 </div>
</div>

关键修改说明 #

• 给.pro-box加上position: relative，让绝对定位的.btn-group完全以产品盒为参照容器，不会跑偏。
• 把.btn-group的width:100%改成left:6px和right:6px，完美贴合产品盒的内边距，不会出现超出盒子的情况。
• 用flex布局配合按钮的宽度计算，让三个按钮自动平分父容器宽度，同时处理了margin带来的间隙问题，保证在任何屏幕尺寸下都能铺满底部。

这样修改后，按钮就能实现你想要的响应式底部布局啦！

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