Question

有没有人知道如何更改导航栏，以便文本上方/下方的空白区域更少。我已经尝试过创建一个负缓冲，但这似乎没有效果。

此外，如果有人知道如何将导航栏更改为按钮（通常是移动网站），那么它就不会占用页面的整个高度。

＆＃13;

.navbar-nav>li {
  float: none;
}
.navbar-default {
  background-color: rgba(255, 255, 255, 0);
  border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: rgba(150, 155, 155, );
}
.navbar {
  margin-bottom: 0 !important;
}

＆＃13;

 <meta content="width=device-width, initial-scale=1" name="viewport">

  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
  <link href="Calums2.css" rel="stylesheet">
  <link href="navbar.css" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<body>

<div class="list" style="Position: absolute; top: 0px; left:0px;">
      <div class="navbar navbar-default">
          <nav class="navbar navbar-default">
          <ul class="nav nav-justified navbar-nav">
        <li><a href="Home.html"><h2>Home</h2></a></li>
        <li><a href="team.html"><h2>Team</h2></a></li>
        <li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
        <li><a href="Blog.html"><h2>Blog</h2></a></li>
        <li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
                 </ul>
              </div>
        </nav>
       <style>
      text-align:justify;
       </style>
      </div>
    </div>

</body>

＆＃13;

Answer 1

我尝试为nav > ul设置包含上/下边距和/或填充设置的CSS规则，从0开始（如果有效果）然后将其更改为您喜欢的值

Answer 2

这样就可以了。

ul.nav li a>h2 {
    margin-top: 0;
    margin-bottom: 0;
}

这是一个小提琴：https://jsfiddle.net/ypfhs1gn/1/

另外，要修复HTML：

<div class="list" style="Position: absolute; top: 0px; left:0px;">
  <div class="navbar navbar-default">
    <nav class="navbar navbar-default">
      <ul class="nav nav-justified navbar-nav">
        <li><a href="Home.html"><h2>Home</h2></a></li>
        <li><a href="team.html"><h2>Team</h2></a></li>
        <li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
        <li><a href="Blog.html"><h2>Blog</h2></a></li>
        <li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
      </ul>
    </nav>
  </div>
</div>

更新：此外，更新了这个小提琴以获取菜单按钮：https://jsfiddle.net/ypfhs1gn/2/

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav nav-justified navbar-nav">
        <li><a href="Home.html"><h2>Home</h2></a></li>
        <li><a href="team.html"><h2>Team</h2></a></li>
        <li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
        <li><a href="Blog.html"><h2>Blog</h2></a></li>
        <li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

如何让导航栏更薄？

2 个答案: