html - 折叠导航旁边的奇数空白

标签 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 

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 上声明的 left 和 right 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>

关于html - 折叠导航旁边的奇数空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48120534/

上一篇：html - 我怎样才能做到最后一个 div 不会在悬停时流入下一行？

下一篇：javascript - 无法在 OS X 的 Safari 中聚焦零尺寸输入

相关文章：

html - 与 Chrome 相比，为什么 Bootstrap 3 日期输入在 Firefox 中看起来不同？

javascript - Twitter Bootstrap 转到嵌套选项卡的特定选项卡

html - CSS Flexbox 适用于除 Safari 以外的所有浏览器？

javascript - 视频无法在移动设备上自动播放

css - 两个导航栏，一张带有 Bootstrap 的图片。是否可以？

javascript - Material.io 组件的自定义类名

html - 为什么这些链接不会改变我的 div 的高度？

javascript - 我可以删除 div 并更改从另一个页面导入的 Iframe 中内容的样式吗？

html - 有没有人找到更好的方法来跨平台测试网络应用程序？

html - WordPress 中的 CSS Circle Mods，在哪里插入代码？

©2024 IT工具网  联系我们