【发布时间】：2018-01-12 11:23:36
【问题描述】：
所以我很缺乏经验，但我正在学习。 我使用 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>感谢您提供的任何帮助。
【问题讨论】：
-
我相信我做到了，我已经将 body {margin:0;} 添加到 css 中，但这没有任何区别。 （以及 html）
-
在突出显示可能导致问题的所有元素时，我也看不到 chrome 开发人员工具上的任何边距。
-
如果您找到一种方法在嵌入式代码 sn-p 中重现或演示该问题，您可以大大改善这个问题（在您的编辑器工具栏中查找代码 sn 的
<>图标-p 工具）或外部链接（如 JSFiddle 或 CodePen），最好是嵌入式代码 sn-p，但最好将所有相关代码包含在问题陈述本身中，对于其他读者也更好，并允许更多用户- 将代码复制到答案的友好方法。 -
添加了 CodePen，抱歉我不知道这些东西，谢谢。
-
啊，不要为小事操心 :) 如果您在这里还有其他问题需要问，您将知道如何发布一个受到关注和有价值的回复的问题，它需要的时间。
标签： html css twitter-bootstrap nav spacing