html - 背景颜色未显示在页脚中

标签 html css bootstrap-4

我使用 Bootstrap 4 重新制作了一个页面,似乎无法弄清楚为什么没有显示页脚背景色。 The page is up here

.footer {
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
  overflow: visible;
  color: #004289;
  font-weight: bold;
  height: 2rem;
  background-color: #CFFEEE;
}	
<footer class="footer">
<div class="container">
<div class="text-center">Copyright &copy; <script>document.write(new Date().getFullYear());</script> The Driftwood</div>
</div>
</footer>

我想我的大脑正在为应该如此简单的事情而爆炸。谢谢 编辑:在下面的运行代码片段管理器中显示我想要的方式。如果您需要更多代码,请询问或查看实时页面。 这就是我所看到的 enter image description here

在 head 部分,我链接到 BS css 和我的自定义 css,就像这样

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="dist/css/custom-bs4.css" rel="stylesheet">

最佳答案

你的 .container 白色背景覆盖了它,因为它是一个比 .footer 更具体的选择器。

要覆盖你可以这样做:

.footer .container {
  background-color: #CFFEEE;
}

关于html - 背景颜色未显示在页脚中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46597350/

相关文章:

html - 带淡入淡出的背景图片幻灯片

javascript - 如何在 sencha 中实现具有全屏模式选项的图像库

css - 使用 CSS 显示 XSTL 表格

html - 即使在放大后如何将子内容放入父 div

css - Bootstrap 4 : validation breaks styling on inline form elements?

javascript - bootstrap-datepicker:选择特定日期时显示 DIV

php - 暂停使用 javascript 提交表单

html - Bootstrap 3 - 列不会居中对齐

javascript - 计算列表中隐藏的下一行元素

javascript - Material-UI:如何将 Drawer 组件置于 AppBar 下方