Question

我正在尝试缩小折叠导航栏中链接之间的空间。有人可以帮帮我吗？我环顾四周，但我不认为我正在寻找合适的东西。 Here is a screenshot正如您所看到的，“链接”之间的空间非常大。我怎么能缩短它？

提前致谢！

这是我的代码： CSS：

.navbar-header {
        background-color: #ffffff;

}

.navbar-default .navbar-brand {
    color: #666699;
    background-color: #ffffff;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
     background-color: #ffffff;

}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #666699;
}

.navbar-brand,
.navbar-nav li a {
    line-height: 85px;
    height: 85px;
    padding-top: 0;
}

.navbar-toggle, span {
    line-height: 75px;
    height: 70px;
    padding-top: 0px;
}

.navbar-default .navbar-nav>li>a {
    color: #666699;
}

.sitecolor {
    background-color: #666699;
}

.img-thumbnail {
    line-height: 80px;
    height: 80px;
    padding-top: 0px ;
    border-color: transparent;
}

#navbar-logo {
    line-height: 30px !important;
    height: 86px !important;
    padding-top: 2px !important;
}

.nav>li>a {
    padding: 9px 20px !important;
}

HTML：

<!DOCTYPE html>
<html lang="en" class="sitecolor">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Title</title>

    <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
     <link type = "text/css" href="css/stylesheet.css"   rel="stylesheet">
  </head>
  <body class="sitecolor">
      <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>
      <!--<a class="navbar-brand" href="#">BSWeb</a> -->
        <a href="#">
            <img id="navbar-logo" src="http://www.betches.com/sites/default/files/article/list/images/google.jpg" />
        </a>
    </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 navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

在CSS的底部，我尝试过.nav＆gt; li＆gt; a但不确定是否有帮助。

Answer 1

这可能有所帮助（至少在没有你的代码的情况下我会想到这一点）：

.navbar-nav li {
margin-bottom: 0; /* play with this value */
margin-top: 0; /* an this too */
}

Answer 2

.nav li{
    margin-top: 10px; //change the 10 if you want
}

你在CSS底部尝试的内容涉及填充...你在寻找元素之间的边距..特别是在这种情况下<li>元素

但如果您喜欢第一个Link所在的位置，并且您只想让底部3个链接变得更接近顶部并且彼此接近那么您将不得不给出最后3个{{1元素一个类名，例如：

<li>

然后在你的CSS中：

<li class="margin"><a href="#">Link</a></li>
<li class="margin"><a href="#">Link</a></li>
<li class="margin"><a href="#">Link</a></li>

Answer 3

您可以将这些规则包装在媒体查询中，以便它们不会应用于您的移动导航链接：

@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav > li {
    padding: 35px 10px;
  }
}

旁注：您没有（或者不应该使用！important声明）。见修订版CSS。

FullPage上的工作示例代码段。

.navbar.navbar-default {
  background-color: #ffffff;
  border-radius: 0;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
  background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
  background-color: #666699;
}
.navbar.navbar-default .navbar-header .navbar-toggle {
  padding: 40px 15px;
}
.navbar.navbar-default .navbar-nav > li > a {
  color: #666699;
}
.sitecolor {
  background-color: #666699;
}
.navbar.navbar-default .navbar-brand {
  color: #666699;
  background-color: #ffffff;
  padding-top: 0;
  height: 100%;
}
.navbar.navbar-default .navbar-brand img {
  height: 80px;
  margin: 20px 0px 0px;
}
@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav > li {
    padding: 35px 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body class="sitecolor">
  <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>
        <!--<a class="navbar-brand" href="#">BSWeb</a> -->
        <a class="navbar-brand" href="#">
          <img src="http://www.betches.com/sites/default/files/article/list/images/google.jpg" />
        </a>
      </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 navbar-nav navbar-right">
          <li><a href="#">Link</a>
          </li>
          <li><a href="#">Link</a>
          </li>
          <li><a href="#">Link</a>
          </li>
          <li><a href="#">Link</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

减少导航栏链接之间的空间

3 个答案: