Bootstrap导航栏是否重叠徽标? [英] Bootstrap navbar overlaps logo?
本文介绍了Bootstrap导航栏是否重叠徽标?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
导航栏的前端
<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处的徽标重叠
我已经尝试过这个CSS
@media (max-width:1502px){
.navbar-brand {
height: 80px;
}
.navbar {
background-color: #ccc;
}
.navbar-toggle {
margin-top: 25px;
}
}
图像:导航栏图像
解决方案
因为导航栏中的链接太多，并且由于字体大小增加，所以它溢出了，因为没有足够的空间，视口变小了. >
您可以更改导航栏折叠的断点，此外，您还可以更改链接的显示属性，以使它们环绕.这将使它们暴露的时间更长，但是您仍然需要比正常情况更早地折叠导航.
示例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>
FRONT END FOR 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>
When i decrease size of google chrome the category and other stuff overlaps logo at width:1502px
I have tried this css
@media (max-width:1502px){
.navbar-brand {
height: 80px;
}
.navbar {
background-color: #ccc;
}
.navbar-toggle {
margin-top: 25px;
}
}
IMAGE : IMAGE OF NAVBAR
解决方案
Because you have so many links inside your nav and due to the increased font size it's overflowing since there simply is not enough space the smaller the viewport gets.
You can change the breakpoint that the navbar collapses, additionally you can change the display property of the links so they wrap. This will leave them exposed longer but you'll still need to collapse the nav earlier then normal.
Example 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>
Example II: Wrapped Links
.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导航栏是否重叠徽标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
