css - Bootstrap 导航栏重叠 Logo ？

Question

导航栏的前端

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand">
      <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />
    </a>
  </div>
  <div class="collapse navbar-collapse" id=".navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <h4>CATEGORY<b class="caret"></b></h4>
        </a>
        <ui>...........</ui>
      </li>
      <li>
        <a href="#">
          <h4>SHIRT</h4>
        </a>
      </li>
      <li>
        <a href="#">
          <h4>PANTS</h4>
        </a>
      </li>
      <li>
        <a href="#">
          <h4>SHOE</h4>
        </a>
      </li>
      <li>
        <a href="#">
          <h4>FASHION</h4>
        </a>
      </li>
      <li>
        <a href="#">
          <h4>PAPER QULING</h4>
        </a>
      </li>
      <li>
        <a href="#">
          <h4>TERRACOTA</h4>
        </a>
      </li>
      <li>
        <a href="#">
          <h4>MEENAKARI</h4>
        </a>
      </li>
      <li>
        <a href="#">
          <h4>TRADITIONAL</h4>
        </a>
      </li>
      <li>
        <a></a>
      </li>
    </ul>
    </ul>
  </div>
  <br />
</nav>

当我减小 google chrome 的尺寸时，类别和其他内容与 width:1502px 的 Logo 重叠我试过这个 css

@media (max-width:1502px){
  .navbar-brand {
    height: 80px; 
  }
  .navbar {
    background-color: #ccc; 
  }
  .navbar-toggle {
    margin-top: 25px; 
  }
}

图片:IMAGE OF NAVBAR

Answer 1

因为您的导航中有太多链接，并且由于字体大小增加，它会溢出，因为视口(viewport)越小，空间就不够用。

您可以更改导航栏折叠的断点，此外您还可以更改链接的显示属性，以便它们换行。这将使它们暴露的时间更长，但您仍然需要比正常情况更早折叠导航。

示例一:

.navbar.navbar-tall {
  background-color: white;
}
.navbar.navbar-tall .navbar-nav > li > a {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
}
.navbar.navbar-tall .navbar-brand {
  padding-top: 5px;
}
.navbar.navbar-tall .navbar-brand img {
  height: 90px;
}
@media (min-width: 1505px) {
  .navbar.navbar-tall .navbar-nav > li > a {
    line-height: 70px;
  }
}
/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/

@media (max-width: 1504px) and (min-width: 768px) {
  .navbar.navbar-fixed-bottom .navbar-collapse,
  .navbar.navbar-fixed-top .navbar-collapse {
    max-height: auto;
    overflow-x: visible;
  }
}
@media (max-width: 1504px) {
  .navbar .navbar-header {
    float: none;
    min-height: 100px;
  }
  .navbar .navbar-left,
  .navbar .navbar-right {
    float: none !important;
  }
  .navbar .navbar-right {
    margin-right: 0px;
  }
  .navbar .navbar-right~.navbar-right {
    margin-right: 0;
  }
  .navbar .navbar-toggle {
    display: block;
    margin-top: 32.5px;
  }
  .navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar .navbar-collapse.collapse {
    display: none!important;
    overflow: visible!important;
  }
  .navbar .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar .navbar-nav>li {
    float: none;
  }
  .navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar .collapse.in {
    display: block !important;
    overflow-y: auto;
  }
  .navbar .navbar-nav .dropdown-menu > li > a,
  .navbar .navbar-nav .dropdown-menu > li > a:hover,
  .navbar .navbar-nav .dropdown-menu > li > a:focus {
    color: #777;
  }
  .navbar .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-tall" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">
        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">
      </a>
    </div>

    <div class="collapse navbar-collapse" id=".navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">LINK</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">SHIRT</a>
        </li>
        <li>
          <a href="#">PANTS</a>
        </li>
        <li>
          <a href="#">SHOE</a>
        </li>
        <li>
          <a href="#">FASHION</a>
        </li>
        <li>
          <a href="#">PAPER QULING</a>
        </li>
        <li>
          <a href="#">TERRACOTA</a>
        </li>
        <li>
          <a href="#">MEENAKARI</a>
        </li>
        <li>
          <a href="#">TRADITIONAL</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

示例二:包装链接

.navbar.navbar-tall {
  background-color: white;
}
.navbar.navbar-tall .navbar-nav > li > a {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
}
.navbar.navbar-tall .navbar-brand {
  padding-top: 5px;
}
.navbar.navbar-tall .navbar-brand img {
  height: 90px;
}
@media (min-width: 1500px) {
  .navbar.navbar-tall .navbar-nav > li > a {
    line-height: 70px;
  }
}
@media (max-width: 1499px) and (min-width: 1000px) {
  .navbar.navbar-tall .navbar-nav {
    display: table;
    float: none;
  }
  .navbar.navbar-tall .navbar-nav > li {
    display: table-cell;
  }
}
/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/

@media (max-width: 1499px) and (min-width: 1000px) {
  .navbar.navbar-fixed-bottom .navbar-collapse,
  .navbar.navbar-fixed-top .navbar-collapse {
    max-height: auto;
    overflow-x: visible;
  }
}
@media (max-width: 999px) {
  .navbar .navbar-header {
    float: none;
    min-height: 100px;
  }
  .navbar .navbar-left,
  .navbar .navbar-right {
    float: none !important;
  }
  .navbar .navbar-right {
    margin-right: 0px;
  }
  .navbar .navbar-right~.navbar-right {
    margin-right: 0;
  }
  .navbar .navbar-toggle {
    display: block;
    margin-top: 32.5px;
  }
  .navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar .navbar-collapse.collapse {
    display: none!important;
    overflow: visible!important;
  }
  .navbar .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar .navbar-nav>li {
    float: none;
  }
  .navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar .collapse.in {
    display: block !important;
    overflow-y: auto;
  }
  .navbar .navbar-nav .dropdown-menu > li > a,
  .navbar .navbar-nav .dropdown-menu > li > a:hover,
  .navbar .navbar-nav .dropdown-menu > li > a:focus {
    color: #777;
  }
  .navbar .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-tall" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">
        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">
      </a>
    </div>

    <div class="collapse navbar-collapse" id=".navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">LINK</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">SHIRT</a>
        </li>
        <li>
          <a href="#">PANTS</a>
        </li>
        <li>
          <a href="#">SHOE</a>
        </li>
        <li>
          <a href="#">FASHION</a>
        </li>
        <li>
          <a href="#">PAPER QULING</a>
        </li>
        <li>
          <a href="#">TERRACOTA</a>
        </li>
        <li>
          <a href="#">MEENAKARI</a>
        </li>
        <li>
          <a href="#">TRADITIONAL</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>