Bootstrap导航栏与徽标重叠？

【问题标题】：Bootstrap navbar overlaps logo?Bootstrap导航栏与徽标重叠？
【发布时间】：2016-12-28 18:27:25
【问题描述】：

导航栏前端 

<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

【问题讨论】：

  • 你能发一张图片或例子吗？
  • 有什么问题？对我来说一切都好。
  • 请检查图片@JustinSkiles
  • 检查我添加的图片@BlackBird
  • paste.ubuntu.com/23701745 这对我没有造成问题

标签： css asp.net twitter-bootstrap navbar


【解决方案1】：

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

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

示例一：

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

【讨论】：

    【解决方案2】：

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

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

    【讨论】：

    • 它几乎成功了，但是徽标变小了，我想要它大
    猜你喜欢
    • 1970-01-01
    • 2015-08-25
    • 1970-01-01
    • 2017-03-19
    • 2013-08-30
    • 1970-01-01
    • 1970-01-01
    • 2015-02-05
    • 2018-07-27
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode