Question

我正在尝试在Bootstrap 4中的响应式图像中创建一个响应式框，但问题是，当我向框中添加100％的width时，它会在图像之后延伸，如果我添加{{ 1}} 15px的属性，它不伸展的图像，但相反，当我在谷歌浏览器浏览器中缩小到33％或低时，框就会离开图像。

另一个问题是当我缩小到33％或者低时，徽标变得太小但是它不会与导航栏保持相同的高度。

我也进行了一些研究，发现在bootstrap 3中使用一个简单的div可以做到这一点没有问题，但是使用Bootstrap 4进行相同的操作。

Answer 1

您为div类 .sborder 设置了100％的宽度，并且您还给出了15px的左边距。这使得div不在图像之外。

使用css calc（）方法设置 .sborder的宽度

查看以下代码和 fiddle

#navbar a {
  margin-right: 20px;
}

希望这个帮助

Answer 2

您是否尝试在图片中添加溢出？我认为你需要的图像是overflow: hidden;在框之前。所以当它从图像内容中出来时，该框将隐藏。