我的桌面上的导航栏似乎工作正常，但当我在不同的屏幕尺寸检查时，它们似乎没有崩溃或任何东西，即使我使用的是 Bootstrap ，所以这就是问题所在。
我的html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>lift Gym</title>
<!-- bootstrap style -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<!--- customized style in index.css -->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark" id="navBar">
<div class="container-fluid">
<a class="navbar-brand" id="heading" href="#">Lift Gym</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navBar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active ml-5 mr-5" aria-current="page" href="#"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link ml-5 mr-5" href="#">about us </a>
</li>
<li class="nav-item">
<a class="nav-link ml-5 mr-5" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link ml-5 mr-3" href="#">contact us </a>
</li>
</ul>
</div>
</div>
</nav>
<footer class="py-5 mt-5 fixed-bottom" id="footerStyle">
</footer>
<!-- bootstrap js -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</body>
</html>字符串
这是我的CSS文件
body{
background-color: black;
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url("https://media.istockphoto.com/id/1447561928/photo/fitness-gym-with-men-and-women-doing-plank-strong-and-exercise-for-muscle-cardio-and.jpg?s=2048x2048&w=is&k=20&c=Q5yRQMVSRkl5guXT6CsR_otVuC9l8TmqYKRtFIdfWgo=");
background-position: left top;
clip-path: polygon(20 50, 100% 0, 100% 100%, 10 50%);
background-repeat: no-repeat;
margin: 0; /* Remove default margin */
min-height: 100vh; /* Set the body height to the full viewport height */
overflow: hidden; /* Hide any content that goes beyond the body boundaries */
}
#navBar {
height: 10vh;
font-size: 25px;
}
#heading {
font-size: 35px;
}
#footerStyle{
background-color: rgb(55, 52, 52);
/* width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;*/
}型
当调整屏幕大小的移动的是希望导航栏将崩溃，但这是不工作，也不是我的页脚，你的帮助是赞赏
1条答案
按热度按时间s4chpxco1#
你没有使用Bootstrap响应断点
字符串
也检查Bootstrap Navbar Doc