折叠导航侧面的奇数空白

时间:2018-01-05 20:04:20

标签: html css twitter-bootstrap nav spacing

所以我很缺乏经验,但我正在学习。 我使用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

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

感谢您提供任何帮助。

1 个答案:

答案 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;
}

代码段示范:

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;