css - 导航栏间距使折叠尺寸看起来很傻

我有一个导航栏，除了折叠时看起来还不错，选项之间的间距太大。我喜欢导航栏的高度，并希望保持不变。但是，如果我更改填充，使它在普通查看模式下高度过小，则选项之间的间距会更好，但整体外观并不是我想要的。另外，以移动格式查看时，图像无法正确调整尺寸吗？但是我认为这又是由于间隔。任何帮助表示赞赏。

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

.navbar-default {
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  border: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  background-color: #00a3fe;
  font-size: 14pt;
  font-weight: 400;
}

a:hover {
  text-decoration: none;
}

.nav.navbar-nav.navbar-right li a {
  color: #ffffff;
}

.nav.navbar-nav.navbar-nav li a {
  color: #ffffff;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  background-color: #49bdfe;
  color: #FFFFFF;
}

.navbar-toggle,
.icon-bar {
  border: 1px solid white;
  background-color: white;
}

.navbar-toggle {
  color: : white;
  border: none;
  background: transparent !important;
}

.navbar-toggle:hover {
  background: transparent !important;
}

.navbar-toggle {
  border: none;
  background: transparent !important;
}

.navbar-toggle:hover {
  background: transparent !important;
}

.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}

.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggle .middle-bar {
  opacity: 0;
}

.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}

.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 10px 16px;
  transition: all 0.4s ease 0s;
}

.navbar-brand {
  font: 30px cursive;
  display: flex;
  align-items: center;
}

.navbar-brand {
  padding: 0px;
}

.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}


/* EXAMPLE 3

    line height is 20px by default so add 30px top and bottom to equal the new .navbar-brand 80px height  */

.example3 .navbar-brand {
  height: 80px;
}

.example3 .nav>li>a {
  padding-top: 30px;
  padding-bottom: 30px;
}

.example3 .navbar-toggle {
  padding: 10px;
  margin: 25px 15px 25px 0;
}

.navspacing {
  padding-left: 30px;
  padding-right: 30px;
}

.example3 {
  padding-left: 30px;
  padding-right: 30px;
}

<!-- NAVBAR -->
<nav class='navbar navbar-default example3'>
  <div class='container'>
    <div class='navbar-header'>
      <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#example-navbar-collapse'>
    <span class='sr-only'>Toggle navigation</span>
    <span class='icon-bar top-bar'></span>
    <span class='icon-bar middle-bar'></span>
    <span class='icon-bar bottom-bar'></span></button>
      <span class='navbar-brand'><img src="images/f2p7.png" alt="faces2places" class="img-responsive" /></span></div>
    <div class='collapse navbar-collapse' id='example-navbar-collapse'>
      <ul class='nav navbar-nav'>
        <li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>About</a></li>
        <li><a href='get_bids.php' class='btn btn-primary btn-lg sharp' role='button'>Get bids</a></li>
        <li><a href='register.php' class='btn btn-primary btn-lg sharp' role='button'>Register company</a></li>
        <li><a href='contact.php' class='btn btn-primary btn-lg sharp' role='button'>Contact</a></li>
      </ul>
      <ul class='nav navbar-nav navbar-right'>
        <li><a href='login.php' class='btn btn-primary btn-lg sharp' role='button'><span class='glyphicon glyphicon-user'></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
<!-- NAVBAR -->

最佳答案

请使用给定的CSS代码替换您的CSS。

<style>
        a[href^=tel] {
          color: inherit;
          text-decoration: none;
        }

        .navbar-default {
          display: flex;
          align-items: center;
          padding-left: 10px;
          padding-right: 10px;
          border: 0;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
          border-radius: 0;
          background-color: #00a3fe;
          font-size: 14pt;
          font-weight: 400;
        }

        a:hover {
          text-decoration: none;
        }

        .nav.navbar-nav.navbar-right li a {
          color: #ffffff;
        }

        .nav.navbar-nav.navbar-nav li a {
          color: #ffffff;
        }

        .navbar-default .navbar-nav>li>a:hover,
        .navbar-default .navbar-nav>li>a:focus {
          background-color: #49bdfe;
          color: #FFFFFF;
        }

        .navbar-toggle,
        .icon-bar {
          border: 1px solid white;
          background-color: white;
        }

        .navbar-toggle {
          color: : white;
          border: none;
          background: transparent !important;
        }

        .navbar-toggle:hover {
          background: transparent !important;
        }

        .navbar-toggle {
          border: none;
          background: transparent !important;
        }

        .navbar-toggle:hover {
          background: transparent !important;
        }

        .navbar-toggle .icon-bar {
          width: 22px;
          transition: all 0.2s;
        }

        .navbar-toggle .top-bar {
          transform: rotate(45deg);
          transform-origin: 10% 10%;
        }

        .navbar-toggle .middle-bar {
          opacity: 0;
        }

        .navbar-toggle .bottom-bar {
          transform: rotate(-45deg);
          transform-origin: 10% 90%;
        }

        .navbar-toggle.collapsed .top-bar {
          transform: rotate(0);
        }

        .navbar-toggle.collapsed .middle-bar {
          opacity: 1;
        }

        .navbar-toggle.collapsed .bottom-bar {
          transform: rotate(0);
        }

        .btn {
          display: inline-block;
          padding: 6px 12px;
          margin-bottom: 0;
          font-size: 14px;
          font-weight: normal;
          line-height: 1.42857143;
          text-align: center;
          white-space: nowrap;
          vertical-align: middle;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          background-image: none;
          border: 1px solid transparent;
          border-radius: 4px;
          padding: 10px 16px;
          transition: all 0.4s ease 0s;
        }

        .navbar-brand {
          font: 30px cursive;
          display: flex;
          align-items: center;
        }

        .navbar-brand {
          padding: 0px;
        }

        .navbar-brand>img {
          height: 100%;
          padding: 15px;
          width: auto;
        }
        ul.nav.navbar-nav {
        margin: 0;
        -webkit-margin-before: 0 !important;
        -webkit-margin-after: 0 !important;
    }

        /* EXAMPLE 3

            line height is 20px by default so add 30px top and bottom to equal the new .navbar-brand 80px height  */

        .example3 .navbar-brand {
          height: 80px;
        }

        .example3 .nav>li>a {
          padding-top: 5px;
          padding-bottom: 5px;
        }

        .example3 .navbar-toggle {
          padding: 10px;
          margin: 25px 15px 25px 0;
        }

        .navspacing {
          padding-left: 30px;
          padding-right: 30px;
        }

        .example3 {
          padding-left: 30px;
          padding-right: 30px;
        }
    </style>

<nav class='navbar navbar-default example3'>
  <div class='container'>
    <div class='navbar-header'>
      <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#example-navbar-collapse'>
    <span class='sr-only'>Toggle navigation</span>
    <span class='icon-bar top-bar'></span>
    <span class='icon-bar middle-bar'></span>
    <span class='icon-bar bottom-bar'></span></button>
      <span class='navbar-brand'><img src="images/f2p7.png" alt="faces2places" class="img-responsive" /></span></div>
    <div class='collapse navbar-collapse' id='example-navbar-collapse'>
      <ul class='nav navbar-nav'>
        <li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>About</a></li>
        <li><a href='get_bids.php' class='btn btn-primary btn-lg sharp' role='button'>Get bids</a></li>
        <li><a href='register.php' class='btn btn-primary btn-lg sharp' role='button'>Register company</a></li>
        <li><a href='contact.php' class='btn btn-primary btn-lg sharp' role='button'>Contact</a></li>
      </ul>
      <ul class='nav navbar-nav navbar-right'>
        <li><a href='login.php' class='btn btn-primary btn-lg sharp' role='button'><span class='glyphicon glyphicon-user'></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>