我在 Bootstrap4 中提到了修复导航栏。但是导航栏在我的代码中溢出
Posted
技术标签:
【中文标题】我在 Bootstrap4 中提到了修复导航栏。但是导航栏在我的代码中溢出【英文标题】：I mentioned fix navbar in Bootstrap4. But Navbar is overflowing in my code 【发布时间】：2020-09-04 09:34:32 【问题描述】：我正确地提到了引导导航栏修复代码。当我滚动屏幕时，我的部分会溢出导航栏。导航栏尚未固定在页面顶部。请确认应该在 bootstrap.min.css 中进行更改，或者我们应该在 html 代码中进行更改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>RaLas</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cookie">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/oldcss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" crossorigin="anonymous">
</head>
<body>
<!-- Start: Navigation Clean -->
<nav class="navbar navbar-light navbar-expand-md navbar-inverse navbar-fixed-top navigation-clean sticky-top">
<div class="container"><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1"><img src="assets/img/Logo_name.png" style="margin-left: -5px;height: 40px;width: 200px;">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active navbar-text" href="#home" style="color: #205D84;"><strong>HOME</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#aboutus" style="color: #205D84;"><strong>ABOUT US</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#services" style="color: #205D84;"><strong>SERVICES</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#contactus" style="color: #205D84;"><strong>CONTACT US</strong></a></li>
</ul>
</div>
</div>
</nav>
<!-- End: Navigation Clean -->
<section id="home" style="padding-top: 0px;padding-bottom: 0px;">
<header id="homepage" class="masthead text-center text-white d-flex home" style="background-image: url("assets/img/homepage_Background_only.jpg");margin-top: 0px;padding-top: 0px;">
<div class="container my-auto" style="margin-top: 161px;">
<div class="row" style="margin-top: 150px;">
<div class="col-lg-10 mx-auto" style="margin-top: -150px;"><img src="assets/img/Ralas_logo_homepage_png.png" style="width: 316px;">
<h2 style="margin-bottom: 7px;">Welcome to RaLas</h2>
</div>
</div>
<div class="col-lg-8 mx-auto" style="margin-top: 10px;"><a class="btn btn-primary text-center btn-xl js-scroll-trigger home_page_button button_hover" role="button" href="" style="background-color: rgba(22,138,221,0);padding-top: 5px;height: 30px;font-size: 15px;">Follow us</a></div>
<!-- Start: social media Icons -->
<div class="row" style="height: 400px;margin-top: 30px;">
<div class="col-12 col-sm-4 col-md-4 col-lg-4" style="height: 130px;">
<div class="login-card"><a href="#"><img class="profile-img-card" src="assets/img/insta.png" style="width: 60px;height: 60px;"></a>
<p class="profile-name-card" style="color:white">Instagram</p>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4" style="height: 130px;">
<div class="login-card"><a href="#"><img class="profile-img-card" src="assets/img/facebook.png" style="width: 60px;height: 60px;"></a>
<p class="profile-name-card" style="color:white">Facebook</p>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4">
<div class="login-card"><a href="#"><img class="profile-img-card" src="assets/img/whatsapp.png" style="width: 60px;height: 60px;"></a>
<p class="profile-name-card" style="color:white">Whatsapp</p>
</div>
</div>
</div>
<!-- End: social media Icons -->
</div>
</header>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="assets/js/scrollscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src='contatcjs/sampjs.js'></script>
<script src='contatcjs/faq.js'></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/scrollscript.js"></script>
<script>
$(document).ready(function()
$("form").submit(function()
alert("Submitted");
);
);
</script>
</body>
</html>
【问题讨论】：
请向我们提供更多代码。我们无法使用您提供的内容尝试调试或复制您的问题。 ***.com/help/how-to-ask 您没有向我们展示您要询问的任何 HTML 或 CSS。你为什么要同时使用多个版本的jQuery？jquery/2.1.4/jquery.min.js, jquery/3.4.1/jquery.min.js, jquery/3.5.1/jquery.min.js.
【参考方案1】：
尝试将 navbar-fixed-top 类替换为 <nav class> 中的 fixed-top 类
【讨论】：
你把所有东西都放在fluid container下以上是关于我在 Bootstrap4 中提到了修复导航栏。但是导航栏在我的代码中溢出的主要内容，如果未能解决你的问题，请参考以下文章
(asp.net) Bootstrap 4 导航栏切换器不工作