折叠导航一侧的奇怪空白

所以我很缺乏经验，但我正在学习。我已经使用 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://i.stack.imgur.com/NbAxV.jpg 这是我使用的唯一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;
}

这是一个代码笔

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>

感谢您提供的任何帮助。

考虑删除在包含(父(元素.fixed-top上声明的左右padding属性，例如：

删除包含元素上的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>

相关内容

最新更新

热门标签：