Css 引导折叠和背景图像压缩'；行不通

在我的代码中，当屏幕大小改变时，会出现折叠图标，但当我单击该图标时，所有内容都不可见

另一个问题是我希望section元素的背景是一个图像，所以我在css中添加了背景图像，但这不起作用

body{
填充顶部：70px；
}
纳夫巴海德先生{
背景色：#bdbd；
高度：100px；
边框样式：实心；
边界权：无；
边界顶部：无；
左边界：无；
}
#纳维滕{
字体大小：20px；
颜色：黑色；
}
.btn小型{
填充：10px 25px；
}
#btnin，#btnin:悬停，#btnin:聚焦{
颜色：#fff；
字体系列：“open_sansemibold”；
字体大小：20px；
背景色：黑色；
文字装饰：无；
}
#btnup，#btnup:悬停，#btnup:焦点{
颜色：黑色；
字体系列：“open_sansemibold”；
字体大小：20px；
背景色：白色；
文字装饰：无；
}

资金短缺排行榜









我的巨无霸
用一个引导程序Jumbotron来做大事

将这两个脚本添加到您的部分中，如果您没有定义jquery和bootstrap.js脚本，那么bootstrap将无法工作

<script src="https://code.jquery.com/jquery-3.2.1.min.js"

---

确保已将所有
引导4
CDN添加到项目中。看起来您缺少必要的Java脚本



另外，我要删除高度：100px.navbarhead

中选择code>，以确保折叠菜单正确显示

---

您还应该在折叠断点处为

.navbar品牌添加一些样式，以便更好地测量。在非常小的屏幕上，我会去掉登录按钮的空白。使用
！重要信息
这是一种不好的做法，但有时在对边缘情况进行覆盖时，它很有用

@媒体屏幕和（最大宽度：992px）{
.navbar品牌{
自对准：柔性端；
最高保证金：-2.5雷姆；
}
.m-4{
边距：0！重要；
}  
}


请参见：
谢谢，它可以工作。但是背景图像不工作。您需要给它一些高度，在代码高度中添加此属性：500px；