导航条间距使得折叠尺寸看起来很傻

Question

我有一个看起来相当不错的导航栏，除了折叠时，选项之间的间距太大了。我喜欢导航栏的高度并希望保持相同但是如果我改变填充它会使得在正常观看模式下的高度太小，磨损选项之间的间距更好但整体外观不是我想要的。在以移动格式查看时，图像也无法正常调整大小？但我认为这是由于间距再次造成的。任何帮助表示赞赏。

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

Answer 1

请用给定的css代码替换你的css。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

您可以尝试此操作并使用media query进行回复模式

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: auto;
}

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

.example3 .navbar-toggle {
  padding: 10px;
  margin: 15px 15px 0px 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 -->

Answer 3

而不是这个css

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

你应该使用

.example3 .nav >li >a {
     padding-top: 2.1 vw;
     padding-bottom: 2.1vw;
}

Answer 4

    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: 2.1vw;
      padding-bottom: 2.1vw;
    }

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

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

    .example3 {
      padding-left: 30px;
      padding-right: 30px;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 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 -->