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 个页脚列中的内容对齐
最新问题
- beanstalk docker - 如何使用 Docker.run.json v1 设置容器名称
- 查找具有相同行数的两个二维数组之间的关联行差异
- decoder.ptr 为 nullptr CreateDesktopWindowTarget - IDesktopWindowTarget
- sh: 1: less: 使用PSQL命令时找不到
- 多维关联数组 - 差异
- 为什么在添加新项目后 React Native FlatList 没有更新？
- 如何在Android中加载Flutter资源
- 更改传递给 Python 函数的变量的内容。从变量创建引用的语法糖？
- SSRS - 导航到链接的网站或报告时，然后导航回来，丢失滚动位置和参数
- Azure AD Connect“无法验证凭据”
- 有什么方法可以通过CSS从SVG背景图像中删除/禁用feFilter吗？
- GCP Cloud Run 抱怨“无法打开文件 '/app/main.py'：[Errno 2] 没有这样的文件或目录”
- 下一个js应用程序路由器，如果已经登录则重定向到主页
- SSH和github如何确定用户名？
- Authjs 的 OAuth 的 Google 提供商无法在 Nextjs 中工作
- TizenBrew 错误，安装失败 检查证书错误::签名中包含证书的证书链无效。:<-3>
- 在groupByKey或groupBy之后形成列列表
- 检测字符串中的字符是否是表情符号（使用Android）
- 动态生成具有静态内容的函数
- 在 React 中从 AWS S3 预签名 url 下载文件
© www.soinside.com 2019 - 2024. All rights reserved.