我从事网络开发工作。 在使用 bootstrap 框架编码时，我遇到了问题。 在响应式测试中，导航栏和屏幕右边缘之间留有一些空间。在那个地方有一个滚动条。如果我想让我的导航栏在那个滚动条后面怎么办 screen shot of that 谁能告诉我我的代码哪里出错了。
body {
position: relative;
width: 100%;
}
.abhudaya {
padding-top: 2.5%;
padding-bottom: 1%;
width: 100%;
background-color: #222730;
}
.logo {
width: 350px;
height: auto;
margin-left: 0%;
}
.contact-address-icon {
width: 26px;
height: auto;
margin-left: 2%;
}
.contact-address-headding {
margin-left: 3px;
color: white;
}
.contact-email-address {
margin-left: 30px;
color: white;
}
.navigation1 {
background-color: #242933;
width: 100%;
}
.nav-tabs li a {
color: #777;
}
.navbar {
margin-bottom: 0;
background-color: #242933;
border: 0;
font-size: 16px !important;
letter-spacing: 4px;
opacity: 0.9;
}
.navbar li a,
.navbar .navbar-brand {
color: #d5d5d5 !important;
}
.navbar-nav li:hover a:hover {
color: #fff !important;
background-color: red;
}
.navbar-nav li.active a {
color: #fff !important;
background-color: red !important;
}
.open .dropdown-toggle {
color: #fff;
background-color: red !important;
}
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu li:hover a:hover {
background-color: #F9F1F0 !important;
color: red !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>index abhudaya</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="" data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="abhudaya container-fluid">
<div class="row">
<div class="col-md-4">
<img src="images/logo.png" alt="logo" class="logo">
</div>
<div class="col-md-3">
<p><img src="images/call.png" alt="call" class="contact-address-icon"><i class="fa fa-phone" aria-hidden="true" style="color: white;"></i><span class="contact-address-headding">lorem</span>
<br><span class="contact-email-address">lorem</span></p>
</div>
<div class="col-md-3">
<p><img src="images/location.png" alt="location" class="contact-address-icon"><span class="contact-address-headding">lorem</span><br><span class="contact-email-address">lorem</span></p>
</div>
</div>
</div>
<div class="navigation1 container-fluid">
<nav class="navbar navbar-default container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle navigation-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">HOME</a></li>
<li><a href="#">BAND</a></li>
<li><a href="#">TOUR</a></li>
<li><a href="#">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque.</p>
</div>
</body>
</html>最佳答案
切换按钮 .navbar-toggle 有边距和填充
将此类添加到您的 css 中以删除填充和边距
.navbar-toggle
{
padding-right: 0px!important;
margin-right: 0px!important;
}
完整代码
body {
position: relative;
width: 100%;
}
.abhudaya {
padding-top: 2.5%;
padding-bottom: 1%;
width: 100%;
background-color: #222730;
}
.logo {
width: 350px;
height: auto;
margin-left: 0%;
}
.contact-address-icon {
width: 26px;
height: auto;
margin-left: 2%;
}
.contact-address-headding {
margin-left: 3px;
color: white;
}
.contact-email-address {
margin-left: 30px;
color: white;
}
.navigation1 {
background-color: #242933;
width: 100%;
}
.nav-tabs li a {
color: #777;
}
.navbar {
margin-bottom: 0;
background-color: #242933;
border: 0;
font-size: 16px !important;
letter-spacing: 4px;
opacity: 0.9;
}
.navbar li a,
.navbar .navbar-brand {
color: #d5d5d5 !important;
}
.navbar-nav li:hover a:hover {
color: #fff !important;
background-color: red;
}
.navbar-nav li.active a {
color: #fff !important;
background-color: red !important;
}
.open .dropdown-toggle {
color: #fff;
background-color: red !important;
}
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu li:hover a:hover {
background-color: #F9F1F0 !important;
color: red !important;
}
.navbar-toggle
{
padding-right: 0px!important;
margin-right: 0px!important;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>index abhudaya</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="" data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="abhudaya container-fluid">
<div class="row">
<div class="col-md-4">
<img src="images/logo.png" alt="logo" class="logo">
</div>
<div class="col-md-3">
<p><img src="images/call.png" alt="call" class="contact-address-icon"><i class="fa fa-phone" aria-hidden="true" style="color: white;"></i><span class="contact-address-headding">lorem</span>
<br><span class="contact-email-address">lorem</span></p>
</div>
<div class="col-md-3">
<p><img src="images/location.png" alt="location" class="contact-address-icon"><span class="contact-address-headding">lorem</span><br><span class="contact-email-address">lorem</span></p>
</div>
</div>
</div>
<div class="navigation1 container-fluid">
<nav class="navbar navbar-default container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle navigation-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">HOME</a></li>
<li><a href="#">BAND</a></li>
<li><a href="#">TOUR</a></li>
<li><a href="#">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque.</p>
</div>
</body>
</html>关于css - 为什么导航栏和屏幕右边缘之间留有空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47503748/