我正在尝试在Bootstrap 4的响应式图像内制作一个响应式框，但问题是，当我将100％的width添加到框中时，它会在图像后延伸，并且如果我将15px的right属性添加到图片不会拉伸，但是当我在Google chrome浏览器中缩小到33％或更低时，该框会退出图片。
另一个问题是，当我缩小到33％或以下时，徽标会变得太小，但不会保持与导航栏相同的高度。
我还进行了一些研究，发现在bootstrap 3中，使用简单的div并没有问题，但是在Bootstrap 4中也可以进行框拉伸。
fiddler
最佳答案
您已经为div类.sborder设置了100％的宽度，并且给定了15px的左边距。这使div超出了图像范围。
使用css calc（）方法设置.sborder的宽度
查看下面的代码和fiddle
.sborder{
display: inline-block;
position: absolute;
bottom: 0;
/*right:15px; doesn't work when the screen is zoomed out*/
width:calc(100% - 30px);
left: 15px;
height: 40%;
opacity: 0.5;
background-color: red;
color: #fff;
padding:0;
}
希望有帮助