Question

所以我制作了一个典型的Bootstrap导航栏，它适用于桌面大小。默认情况下，当我使用navbar-brand类添加我的徽标时，如文档示例所示，徽标悬挂在导航栏上。我通过向链接本身添加填充来解决这个问题。这很好用，直到我调整浏览器大小以像移动设备一样。当它坍塌时，导航栏的高度会降低以适应拨动开关，徽标会再次突出。我该怎么解决这个问题？我是否通过添加填充来使导航栏的高度正确？或者我应该通过专门指定它来使它固定高度？

徽标高55像素，宽128像素。

这是我的HTML：

    <nav id="LC-navbar" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div id="LC-navbar-header" class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#LC-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a id="LC-navbar-brand" class="navbar-brand img-responsive" href="../">
                    <img class="img-responsive" src="../assets/img/logo-horizontal.png">
                </a>
            </div>

            <div id="LC-navbar-collapse" class="collapse navbar-collapse">
                <ul id="LC-navbar-links" class="nav navbar-nav navbar-right">
                    <li><a href="../">Home</a></li>
                    <li class="active"><a href="../shop/">Shop</a></li>
                    <li><a href="../team/">Our Team</a></li>
                    <li><a href="../about/">About Us</a></li>
                    <li><a href="../contact/">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>

和CSS：

#LC-navbar {
    background-color: #202020;
    border: none;
}
.navbar-brand {
    padding-left: 30px;
}
#LC-navbar-links {
    padding-right: 20px;
}
#LC-navbar-links li {
    padding: 16px 10px;
}
#LC-navbar-links a {
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    color: #c0c0c0;
    -webkit-transition: color 0.25s;
    -moz-transition: color 0.25s;
    -o-transition: color 0.25s;
    transition: color 0.25s;
}
#LC-navbar-links a:hover {
    color: #BE1E2D;
}
#LC-navbar-links .active > a {
    color: #BE1E2D;
    background: none;
}
#LC-navbar-links .active > a:hover {
    color: #BE1E2D;
    background: none;
}

如果在折叠后将样式更改为导航栏，我该如何处理？显然要改变悬垂问题，但是如果说我希望它在折叠时与打开时有不同的背景颜色？

Answer 1

切换菜单显示的宽度小于768px的宽度，因此请使用max-width: 768px媒体查询。

@media (max-width: 768px) {
  .navbar-brand {
    height: 80px; // Logo will not overhang
  }
  #LC-navbar {
    background-color: #ccc; // Change background color
  }
  .navbar-toggle {
    margin-top: 25px; // Adjust toggle position
  }
}

崩溃时Bootstrap导航栏品牌标志重叠

1 个答案: