Html 引导中的覆盖问题

我正在培训如何使用引导创建一个响应迅速的站点。到目前为止还不错，即使我想象我的代码不是超级干净。困扰我几个小时的问题是，我无法覆盖图像

无论如何，我无法使此覆盖与图像的大小相对应，而不是与此覆盖所在的

的大小相对应

我简化了我的案件，使之更容易解决

因此，我有一个溢出的框架问题：背景（下图底部的蓝色）是

和

的大小，但不是图像的大小。图像本身在顶部自动具有25px的填充，在右侧具有15px，在左侧具有相同的填充

另一方面，我的背景根本没有这些填充，在我的div上添加填充也不会改变任何东西。我就是没法把这个沙发做对尺寸。或者更确切地说是一个与我的图像大小相对应的大小，其填充似乎是引导功能所固有的

下面是Firefox控制台的外观，它显示了div的填充和大小

代码如下：

@介质（最小宽度：576px）{
.容器液体{
宽度：540px；/*浇注小起重机*/
}
}
@介质（最小宽度：768px）{
.容器液体{
宽度：720px；/*浇注小起重机*/
}
}
@介质（最小宽度：1200px）{
.容器液体{
宽度：1200px；/*浇筑lesécrans moyens*/
}
}
@介质（最小宽度：1920像素）{
.容器液体{
宽度：1900px；/*浇筑大吊车*/
}
}
html，正文{
身高：100%；
左侧填充：15px；
右侧填充：15px；
}
/*上菜单*/
导航>分区>分区[类*=“菜单高级”]{
背景色：黑色；
线高：40px；
文本对齐：居中；
}
导航>分区>分区>a{
颜色：白色；
文本转换：大写；
}
导航>俯仰>俯仰>俯仰：悬停{
颜色：白色；
文本转换：大写；
}
德辛先生{
右边框：1px纯白；
边界半径：10px 10px 0px 0px；
}
.德辛：悬停{
背景：rgba（0,0,0,1）url（“images/separator.png”）无重复底部；
}
.视频{
边界半径：10px 10px 10px 10px；
右边框：1px纯白；
左边框：1px纯白；
}
.视频：悬停{
背景：rgba（0,0,0,1）url（“images/separator.png”）无重复底部；
}
.简历{
边界半径：10px 10px 10px 10px；
左边框：1px纯白；
}
.cv:悬停{
背景：rgba（0,0,0,1）url（“images/separator.png”）无重复底部；
}
/*菜单*/
导航>分区>分区[类*=“菜单显示”]{
边框顶部：2件纯白；
背景色：黑色；
线高：40px；
文本对齐：居中；
}
.nb{
边界半径：0px 0px 0px 10px；
右边框：1px纯白；
}
库勒斯先生{
边界半径：0px 10px 10px 0px；
左边框：1px纯白；
}
.col-xl-4
{
左侧填充：15px；
}
/*德辛一节*/
.fit图像{
宽度：100%；
对象匹配：包含；
边界半径：10px 10px 10px 10px；
}
.覆盖{
位置：绝对位置；
底部：0%；
左：50%；
背景：蓝色；
身高：15%；
宽度：100%；
不透明度：0.5；
}
.ctr{
转换：转换（-50%，0%）；
文本对齐：居中；
}
.内容：悬停{
不透明度：1；
}
雷夫先生{
填充顶部：25px；
右边填充：10px；
最大宽度：100%；
}
爱慕先生{
填充顶部：25px；
左侧填充：10px；
右边填充：10px；
最大宽度：100%；
}
查洛尼先生{
填充顶部：25px；
左侧填充：10px；
最大宽度：100%；
}

Batche-Dessins

您的

.overlay

父类：

wrapper reve col-xl-4 col-lg-6 col-md-12 col-sm-12

有一个

填充：15px

因此

宽度：100%

将尊重这一点

我会使用

宽度：calc（100%-30px）（每15像素侧30像素）

编辑：15px的填充来自
.col-*
引导类。您可以在浏览器上的“计算”选项卡上查看源代码。

第628行：

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

您的
.overlay
父类：

wrapper reve col-xl-4 col-lg-6 col-md-12 col-sm-12
有一个
填充：15px

因此
宽度：100%
将尊重这一点

我会使用
宽度：calc（100%-30px）（每15像素侧30像素）

编辑：15px的填充来自
.col-*
引导类。您可以在浏览器上的“计算”选项卡上查看源代码。

第628行：

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

以JSFIDLE为例，您想要实现什么？您好，我解释了我的问题。我使用JSFIDLE是因为人们更容易看到问题所在！背景的大小是“”而不是图片的大小。哦。。。我懂了。让我们看看发生了什么。好的，很酷，谢谢！：）非常感谢你！请你解释一下为什么会这样？我从未定义过应该有15px的填充。我不知道现在是“calc”！再次感谢你！以JSFIDLE为例，您想要实现什么？您好，我解释了我的问题。我使用JSFIDLE是因为人们更容易看到问题所在！背景的大小是“”而不是图片的大小。哦。。。我懂了。让我们看看发生了什么。好的，很酷，谢谢！：）非常感谢你！请你解释一下为什么会这样？我从未定义过应该有15px的填充。我不知道现在是“calc”！再次感谢你！令人惊叹的。仅供参考，
calc
可能会很贵，不要太疯狂！阅读这本书很有帮助！令人惊叹的。仅供参考，
calc
可能会很贵，不要太疯狂！读这本书很有趣