我用 bootstrap 创建了一个网站，在导航栏上，我有一个很长的名字。它在计算机、平板电脑和大型手机 (iPhone 6+) 上看起来不错。当我使用较小的 iPhone(例如 5s 或 4s)查看它时，它会将导航栏中的网站标题换到下一行。我附上了位于 here 的 Jsfiddle .谢谢!
<title>Superlong website name title here</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Nav -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-6"> <a href="#" class="navbar-brand" style="color: rgb(41,101,168);">Super long Website name</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="col-xs-6">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a style="color: rgb(41,101,168);" href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a>
</li>
<li><a style="color: rgb(41,101,168);" href="#"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> FAQ</a>
</li>
<li class="dropdown"><a style="color: rgb(41,101,168);" href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span> Online Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" target="_blank">VA Forms</a>
</li>
<li><a href="#" target="_blank">eBenefits</a>
</li>
</ul>
<li><a style="color: rgb(41,101,168);" href="#">Locations</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>最佳答案
这是我对您的代码段所做的更改
变化:
*在 .navbar-brand 中注释高度和 *移动了右侧 div 上的导航栏切换按钮
您可以在更新的fiddle 上看到它
这是代码
<title>Superlong website name title here</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Nav -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-6"> <a href="#" class="navbar-brand" style="color: rgb(41,101,168);">Super long Website name</a>
</div>
<div class="col-xs-6">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a style="color: rgb(41,101,168);" href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a>
</li>
<li><a style="color: rgb(41,101,168);" href="#"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> FAQ</a>
</li>
<li class="dropdown"><a style="color: rgb(41,101,168);" href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span> Online Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" target="_blank">VA Forms</a>
</li>
target="_blank">eBenefits</a>
</li>
</ul>
<li><a style="color: rgb(41,101,168);" href="#">Locations</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
和CSS
.navbar-brand {
float: left;
/*height: 50px;*/
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
关于html - Bootstrap 导航栏标题在小型设备上溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29135086/