Question

NAVBAR的前端

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

当我减少谷歌浏览器的大小时，类别和其他内容会重叠width:1502px处的徽标我试过这个css

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

图片：IMAGE OF NAVBAR

Answer 1

也许这就是你要找的东西：

.navbar-brand {
    padding: 0px !important;
}

    .navbar-brand > img {
        height: 100%;
        width: auto;
    }

@media (min-width:768px) {
    .navbar-brand {
        padding: 15px 0px 0px 0px !important;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" 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">
                    <!--start - only for test pupose-->
                    <img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">
                    <!--start - only for test pupose-->
                    <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="navbar-collapse 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>
                    </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>
            </div>
        </div>
    </nav>

Answer 2

因为你的导航内部有很多链接，并且由于字体大小的增加，它会溢出，因为空间不足，视口越小。

您可以更改导航栏折叠的断点，另外您可以更改链接的显示属性以便它们换行。这将使他们暴露更长时间，但你仍然需要在正常之前折叠导航。

示例I：

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

示例II： 包裹的链接

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

Bootstrap导航栏重叠徽标？

2 个答案: