所以我很缺乏经验，但我正在学习。 我使用Bootstrap框架创建了一个基本的可切换导航，但是当导航器折叠时，折叠部分的两侧都有一些空白区域。 是否有一些我不知道的利润？或者是其他什么问题？
<body>
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse d-flex fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" style="width:40px" href="#"><img class="img-fluid" id="nav-logo" src="Images/LOGO.png" width="40" height="40"></a>
<div class="collapse navbar-collapse ml-0 bg-inverse" id="navbarTogglerDemo01">
<hr/>
<ul class="navbar-nav" style="width:100%">
<li class="nav-item ml-md-auto mr-md-5 ml-5">
<a class="nav-link" id="event_item" href="#">Events</a>
</li>
<li class="nav-item ml-md-5 ml-5">
<a class="nav-link disabled" href="#">Club</a>
</li>
<li class="nav-item ml-md-auto mr-md-5 ml-5">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</body>
以下是上述代码的输出。
https://imgur.com/a/DWUdH
这是我唯一使用的CSS。
a.nav-link {
font-size:1.5rem;
}
nav {
height:60px;
}
hr {
border-color:white;
border-width:1px;
margin:20px, auto, auto, auto;
padding-bottom:0px;
width:80%;
}
body {
font-family:"Raleway", sans-serif;
}
html, body {
padding:0;
}
这是CodePen
https://codepen.io/JangTog/pen/zpPEom
a.nav-link {
font-size: 1.5rem;
}
.nav-item {
margin-left: 80px;
}
nav {
height: 60px;
}
.navbar-nav {
width: 100%;
}
.navbar-brand {
width: 40px;
}
hr.hr {
border-color: white;
border-width: 1px;
margin-top: 0px;
margin-bottom: 0px;
width: 80%;
}
body {
font-family: "Raleway", sans-serif;
}
html,
body {
padding: 0;
margin: 0;
}<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/navStyle.css" type="text/css">
<link rel="stylesheet" href="CSS/mainStyle.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">
</head>
<body style="max-width: 500px;">
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-fluid" id="nav-logo" src="https://www.placehold.it/40x40" width="40" height="40"></a>
<div class="collapse navbar-collapse ml-0 bg-inverse" id="navbarToggler">
<ul class="navbar-nav">
<li class="nav-item ml-md-auto">
<a class="nav-link" href="#">Home</a>
</li>
<hr class="hidden-md-up hr" />
<li class="nav-item ml-md-5">
<a class="nav-link" href="#">Events</a>
</li>
<hr class="hidden-md-up hr" />
<li class="nav-item ml-md-5">
<a class="nav-link disabled" href="#">Club</a>
</li>
<hr class="hidden-md-up hr" />
<li class="nav-item ml-md-auto mr-md-5">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</body>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</html>
感谢您提供任何帮助。
答案 0 :(得分：0)
考虑删除在包含（父）元素padding上声明的左和右 .fixed-top属性，例如：
删除包含元素的padding：
nav.fixed-top {
padding-left: 0;
padding-right: 0;
}
这些属性值阻止了下拉元素占据整个水平宽度。
然后通过在适当的嵌套元素上声明必要的margin属性来抵消初始填充间距，例如：
在嵌套元素上声明margin属性：
.navbar-brand {
margin-left: 15px;
}
.navbar-toggler-right {
margin-right: 15px;
}
代码段示范：
a.nav-link {
font-size: 1.5rem;
}
.nav-item {
margin-left: 80px;
}
nav {
height: 60px;
}
.navbar-nav {
width: 100%;
}
.navbar-brand {
width: 40px;
}
hr.hr {
border-color: white;
border-width: 1px;
margin-top: 0px;
margin-bottom: 0px;
width: 80%;
}
body {
font-family: "Raleway", sans-serif;
}
html,
body {
padding: 0;
margin: 0;
}
/* Additional */
nav.fixed-top {
padding-left: 0;
padding-right: 0;
}
.navbar-brand {
margin-left: 15px;
}
.navbar-toggler-right {
margin-right: 15px;
}<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/navStyle.css" type="text/css">
<link rel="stylesheet" href="CSS/mainStyle.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">
</head>
<body style="max-width: 500px;">
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-fluid" id="nav-logo" src="https://www.placehold.it/40x40" width="40" height="40"></a>
<div class="collapse navbar-collapse ml-0 bg-inverse" id="navbarToggler">
<ul class="navbar-nav">
<li class="nav-item ml-md-auto">
<a class="nav-link" href="#">Home</a>
</li>
<hr class="hidden-md-up hr" />
<li class="nav-item ml-md-5">
<a class="nav-link" href="#">Events</a>
</li>
<hr class="hidden-md-up hr" />
<li class="nav-item ml-md-5">
<a class="nav-link disabled" href="#">Club</a>
</li>
<hr class="hidden-md-up hr" />
<li class="nav-item ml-md-auto mr-md-5">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</body>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</html>