Bootstrap 5 页脚没有响应
问题描述 投票：0回答：1
我正在使用 bootstrap 5、HTML 和 CSS 创建一个网站。我注意到，当我缩小屏幕尺寸时，页脚中的列不会对齐。当屏幕为移动设备大小和桌面大小时，页脚中的列会对齐，但当屏幕为平板电脑大小和笔记本电脑大小时，页脚中的列不会对齐。
这就是平板电脑大小的屏幕的样子
这就是桌面大小的屏幕的样子 
测试.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | </title>
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Default"
disabled
href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
>
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Web Awesome"
href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
>
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- FOOTER SECTION START -->
<footer class="bg-dark text-white " id="footer">
<div class="container">
<div class="row mb-2">
<div class="col-md-3 mt-5">
<h4>About Us</h4>
<hr />
<p>We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
</p>
<!-- FACEBOOK SECTION -->
<a href="">
<i class="fa-brands fa-facebook fa-2x"></i>
</a>
<!-- INSTAGRAM SECTION -->
<a href="">
<i class="fa-brands fa-instagram fa-2x"></i>
</a>
<!-- TWITTER SECTION -->
<a href="">
<i class="fa-brands fa-twitter fa-2x"></i>
<!-- LINKEDIN SECTION -->
</a>
<!-- <a href="#">
<i class="fa-brands fa-linkedin fa-2x"></i>
</a> -->
<!-- WHATSAPP SECTION -->
<!-- <a href="#">
<i class="fa-brands fa-whatsapp fa-2x"></i>
</a> -->
</div>
<div class="col-md-3 mt-5">
<h4>Quick Links</h4>
<hr />
<ul class="navbar-nav">
<li class="nav-item"><a href="/index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="/services.html" class="nav-link">Services</a> </li>
<li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a> </li>
</ul>
</div>
<div class="col-md-3 mt-5">
<h4>Privacy and Terms</h4>
<hr />
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Privacy Policy</a></li>
<li class="nav-item"><a href="#" class="nav-link">Terms & Coniditions</a></li>
<li class="nav-item"><a href="#" class="nav-link">API Documentation</a> </li>
</ul>
</div>
<div class="col-md-3 mt-5">
<h4>Contact Info</h4>
<hr />
<p class="text-white">
City, State 12345 <br />
Call Us Now 123-456-7890 <br />
[email protected]
</p>
</div>
</div>
</div>
<div class="bg-dark text-white text-center py-4" id="copyright">
Copyright © 2023 . All Rights Reserved.
</div>
</footer>
<!-- FOOTER SECTION CLOSE -->
</body>
</html>
测试.css
:root {
--desktop: 1200px;
--laptop: 992px;
--tablet: 768px;
--mobile: 576px;
}
footer a {
color: hsl(0, 0%, 100%);
text-decoration: none;
}
footer a i {
color: hsl(0, 0%, 100%);
text-decoration: none;
color:white;
}
#footer {
color: hsl(0, 0%, 100%);
}
#copyright {
border-top: 1px solid hsl(0, 0%, 20%) ;
}
/* SMALL MEDIA QUERY */
@media screen and (min-width: var(--mobile)) and (max-width: var(--tablet)) {
.nav-link::after {
content: '';
opacity: 0;
transition: all 0.2s;
height: 2px;
width: 100%;
background: hsl(18, 100%, 62%);
position: absolute;
bottom: 0;
left: 0;
}
.nav-link:hover::after {
opacity: 1;
}
.dropdown:hover > .dropdown-menu {
display: block;
background-color: hsl(210, 45%, 30%);
margin-top: 0;
width: 175px;
.btn {
color: hsl(0, 0%, 100%);
}
.dropdown-item:hover {
background-color: hsl(210, 55%, 41%);
}
}
footer li:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
footer i:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
}
/* MEDIUM MEDIA QUERY */
@media screen and (min-width: var(--tablet)) and (max-width: var(--laptop)) {
.nav-link::after {
content: '';
opacity: 0;
transition: all 0.2s;
height: 2px;
width: 100%;
background: hsl(18, 100%, 62%);
position: absolute;
bottom: 0;
left: 0;
}
.nav-link:hover::after {
opacity: 1;
}
.dropdown:hover > .dropdown-menu {
display: block;
background-color: hsl(210, 45%, 30%);
margin-top: 0;
width: 175px;
.btn {
color: hsl(0, 0%, 100%);
}
.dropdown-item:hover {
background-color: hsl(210, 55%, 41%);
}
}
footer li:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
footer i:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
}
/* LARGE MEDIA QUERY */
@media screen and (min-width: var(--laptop)) and (max-width: var(--desktop)) {
.nav-link::after {
content: '';
opacity: 0;
transition: all 0.2s;
height: 2px;
width: 100%;
background: hsl(18, 100%, 62%);
position: absolute;
bottom: 0;
left: 0;
}
.nav-link:hover::after {
opacity: 1;
}
.dropdown:hover > .dropdown-menu {
display: block;
background-color: hsl(210, 45%, 30%);
margin-top: 0;
width: 175px;
.btn {
color: hsl(0, 0%, 100%);
}
.dropdown-item:hover {
background-color: hsl(210, 55%, 41%);
}
}
footer li:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
footer i:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
}
:root {
--desktop: 1200px;
--laptop: 992px;
--tablet: 768px;
--mobile: 576px;
}
footer a {
color: hsl(0, 0%, 100%);
text-decoration: none;
}
footer a i {
color: hsl(0, 0%, 100%);
text-decoration: none;
color:white;
}
#footer {
color: hsl(0, 0%, 100%);
}
#copyright {
border-top: 1px solid hsl(0, 0%, 20%) ;
}
/* SMALL MEDIA QUERY */
@media screen and (min-width: var(--mobile)) and (max-width: var(--tablet)) {
.nav-link::after {
content: '';
opacity: 0;
transition: all 0.2s;
height: 2px;
width: 100%;
background: hsl(18, 100%, 62%);
position: absolute;
bottom: 0;
left: 0;
}
.nav-link:hover::after {
opacity: 1;
}
.dropdown:hover > .dropdown-menu {
display: block;
background-color: hsl(210, 45%, 30%);
margin-top: 0;
width: 175px;
.btn {
color: hsl(0, 0%, 100%);
}
.dropdown-item:hover {
background-color: hsl(210, 55%, 41%);
}
}
footer li:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
footer i:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
}
/* MEDIUM MEDIA QUERY */
@media screen and (min-width: var(--tablet)) and (max-width: var(--laptop)) {
.nav-link::after {
content: '';
opacity: 0;
transition: all 0.2s;
height: 2px;
width: 100%;
background: hsl(18, 100%, 62%);
position: absolute;
bottom: 0;
left: 0;
}
.nav-link:hover::after {
opacity: 1;
}
.dropdown:hover > .dropdown-menu {
display: block;
background-color: hsl(210, 45%, 30%);
margin-top: 0;
width: 175px;
.btn {
color: hsl(0, 0%, 100%);
}
.dropdown-item:hover {
background-color: hsl(210, 55%, 41%);
}
}
footer li:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
footer i:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
}
/* LARGE MEDIA QUERY */
@media screen and (min-width: var(--laptop)) and (max-width: var(--desktop)) {
.nav-link::after {
content: '';
opacity: 0;
transition: all 0.2s;
height: 2px;
width: 100%;
background: hsl(18, 100%, 62%);
position: absolute;
bottom: 0;
left: 0;
}
.nav-link:hover::after {
opacity: 1;
}
.dropdown:hover > .dropdown-menu {
display: block;
background-color: hsl(210, 45%, 30%);
margin-top: 0;
width: 175px;
.btn {
color: hsl(0, 0%, 100%);
}
.dropdown-item:hover {
background-color: hsl(210, 55%, 41%);
}
}
footer li:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
footer i:hover {
color: hsl(24, 83%, 65%);
transition: 0.2s;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | </title>
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Default"
disabled
href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
>
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Web Awesome"
href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
>
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- FOOTER SECTION START -->
<footer class="bg-dark text-white " id="footer">
<div class="container">
<div class="row mb-2">
<div class="col-md-3 mt-5">
<h4>About Us</h4>
<hr />
<p>We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
</p>
<!-- FACEBOOK SECTION -->
<a href="">
<i class="fa-brands fa-facebook fa-2x"></i>
</a>
<!-- INSTAGRAM SECTION -->
<a href="">
<i class="fa-brands fa-instagram fa-2x"></i>
</a>
<!-- TWITTER SECTION -->
<a href="">
<i class="fa-brands fa-twitter fa-2x"></i>
<!-- LINKEDIN SECTION -->
</a>
<!-- <a href="#">
<i class="fa-brands fa-linkedin fa-2x"></i>
</a> -->
<!-- WHATSAPP SECTION -->
<!-- <a href="#">
<i class="fa-brands fa-whatsapp fa-2x"></i>
</a> -->
</div>
<div class="col-md-3 mt-5">
<h4>Quick Links</h4>
<hr />
<ul class="navbar-nav">
<li class="nav-item"><a href="/index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="/services.html" class="nav-link">Services</a> </li>
<li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a> </li>
</ul>
</div>
<div class="col-md-3 mt-5">
<h4>Privacy and Terms</h4>
<hr />
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Privacy Policy</a></li>
<li class="nav-item"><a href="#" class="nav-link">Terms & Coniditions</a></li>
<li class="nav-item"><a href="#" class="nav-link">API Documentation</a> </li>
</ul>
</div>
<div class="col-md-3 mt-5">
<h4>Contact Info</h4>
<hr />
<p class="text-white">
City, State 12345 <br />
Call Us Now 123-456-7890 <br />
[email protected]
</p>
</div>
</div>
</div>
<div class="bg-dark text-white text-center py-4" id="copyright">
Copyright © 2023 . All Rights Reserved.
</div>
</footer>
<!-- FOOTER SECTION CLOSE -->
</body>
</html>1个回答
1
投票
投票
所以问题是您的“隐私和条款”标题在某些屏幕宽度下会换行成 2 行。
这里有几个选项。
(1) 您可以将标题变小，这样它就不会换行：
https://codepen.io/panchroma/pen/rNQRZQj
这是从第 157 行开始的新 CSS
@media screen and (min-width: 768px) and (max-width: 991px) {
footer h4 {
font-size: 1rem !important;
}
}
或者
(2) 您可以保持标题的字体大小相同，但增加所有标题的高度，使其相当于 2 行高
https://codepen.io/panchroma/pen/eYQXxmW
@media screen and (min-width: 768px) and (max-width: 991px) {
footer h4 {
min-height: 56px;
}
}
在这两个示例中，在 CSS 的第 158 行，我向第 1 列和第 4 列中的段落添加了一些顶部填充，以便所有 4 个页脚列中的内容对齐
最新问题
- streamlit 显示时间太长
- odoo：寻找方法，我在树视图中单击“添加行”按钮
- 轮询取消令牌的异步代码与注册调用者请求时要执行的回调之间有什么根本区别？
- streamplit 显示时间太长
- 升级到 Spring 3 后无法到达 Spring @RestController 公共入口点
- 努力在 Delphi 中的 TMS WEB Core 上链接 TWebLabelLink
- 如何使用 Spring Cloud Contract Verifier 跳过测试生成 Maven 目标？
- 努力在 Tms Web Core Delphi 上链接 WebLabelLink
- Linux Mint：在 VS 终端内找不到节点
- 单击字段时更改颤振中文本表单字段的前缀图标颜色
- 错误：没有名为“clipBehavior”的命名参数
- 在 VS 2010 的 Winforms 项目中添加 WPF 窗口
- Python 3.12 上 tp_alloc 中的段错误
- Parquet Writer 写入缓冲区或字节流
- 如何在按下按钮时创建褪色的不透明动画？
- Perl：哈希引用访问键数组
- 有没有办法在编译时检测到我没有填充这些结构体的所需字段？
- 防止 Windows 10 上的屏幕锁定/睡眠锁定/密码锁定/等
- 为什么我的代码中出现 Pycharm 操作数错误？
- Nuxt 3 将包含 JSON 文件的文件夹添加到构建中，以便使用 `fs` 进行读取
© www.soinside.com 2019 - 2024. All rights reserved.