Twitter bootstrap 使用引导时，条幅图像未与响应图像一起显示

我正在尝试使用引导中的响应映像功能。但是，当我尝试使用以下代码显示横幅图像时，横幅将不会显示：

<div class="jumbotron">
    <div class="img hero img-responsive"></div>
</div> 

.hero {
  background: url("../images/banner500.jpg") no-repeat;
  vertical-align: bottom;
  width: 100%;
  height: 500px;      
  left: 0;
  top: 0;
  z-index: 1;
}

.英雄{
背景：url（“../images/banner500.jpg”）不重复；
垂直对齐：底部对齐；
宽度：100%；
高度：500px；
左：0；
排名：0；
z指数：1；
}

我还将AngularJS与SASS结合使用

---

关于如何修复此问题的任何建议？

.img responsive

将

height:auto

作为CSS属性。如果您在自己的CSS之后加载引导，则引导将覆盖您的

.hero

高度。您可以通过先加载引导或将CSS选择器更改为

.jumbotron.hero

来解决此问题

---

这里需要注意的是，

.img responsive

无论如何都不会为您做任何事情。您可以直接在图像上使用该类以使其响应。你想要的是你的背景图像，以适应相应的，这意味着你应该设置

背景大小：覆盖（或包含）

并根据需要调整div的高度，可能是

高度：0；填充底部：X%

其中X%是图像高度与宽度的百分比。

大多数CSS没有效果，有些甚至有错误。我仍然不确定我们是否能解决你的问题，因为就像那些评论你的人一样，我猜你的问题与我们没有看到的代码有关，因为你至少应该看到一些东西

但是，有些零件您应该明确更换，还有一些进一步排除故障的提示：

正确使用

.img responsive

如

.img responsive

中所示，只能在

-标签上使用。它的功能（

height:auto；

）无法在具有背景图像的

上工作。 现在，当您使用

.img responsive

时，您不应该手动设置

高度

，否则它将不起作用，因为它主要是将高度设置为

自动

正确使用位置和

z-index

左

、

右

和

z-index

只能与

位置：相对

或

位置：绝对

结合使用。因此，在您的情况下，它们应该没有效果，但为了可读性，您应该删除它们

正确使用

垂直对齐

垂直对齐

仅对内联元素有效，在您的案例中我看不到任何内联元素

正确使用

宽度


您正在块元素上使用
width:100%
，块元素的容器宽度应始终为100%。因此，该属性在您的情况下也不是必需的（除非有大量代码和规则影响示例）。
知道这一点后，还可以检查父元素的有效宽度

这意味着，从您发布的内容来看，只有两行CSS真正起作用，当您什么也看不到时，代码之外也会出现另一个问题。
您确定正确链接到图像了吗？我已经将您的代码放入JSFIDLE，将背景图像更改为外部图像，它似乎可以工作：@Pawel Duda我想可以。当我使用Chrome进行检查时，URL链接是活动的，当我将鼠标悬停在上面时，它会显示图像。类似地，当我取消选中img响应类的
height:auto
时，页面上会显示横幅。也许其他一些样式正在应用于所述div，覆盖默认引导行为？编辑：确保您的自定义样式表是在引导后加载的。@Pawel Duda这是可能的，但我添加的唯一CSS在上面。CSS资源在HTML代码中的显示顺序是什么？谢谢。因此，我是否应该使用
width:100%
？默认情况下，div是一个宽度为100%的块级元素，因此您不需要声明宽度，除非您希望它大于或小于100%。所以不需要-您不需要使用
width:100%