调整浏览器大小或在低分辨率移动设备上使用它时，导航栏品牌会减少。
Here's my jsfiddle
我的NavBar代码：
<div class="navbar navbar-default" id="page">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="img/feueac-logo.png" style="position:absolute; width:30px; height:35px; top:7px; left:5px;" /><span style="padding-left:25px; padding-top:0px;" class="navbar-brand" >FEU - EAC E - Project System</span></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="client.php">Client Application</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="modal_trigger" href="#modal" class="btn_red"><a href="#">Faculty</a></li>
<li id="modal_trigger2" href="#modal2" class="btn_red"><a href="#">Student</a></li>
<li class="divider"></li>
<li id="modal_trigger3" href="#modal3" class="btn_red"><a href="#">Guest</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<p style="padding-left:20px; padding-top:4px;">
<input type="text" class="form-control col-lg-8" placeholder="Search" style="width:300px; height:30px;">
</form>
</div>
</div>
这是一些examples：
好：
坏：
更差：
最佳答案
我很幸运使用FitText，这是一个适合其父元素的文本的jQuery插件。
从他们的网站：
FitText使字体大小灵活。在您的流畅或响应式布局上使用此插件可实现可缩放的标题，该标题填充父元素的宽度。
不完全是一个“答案”（对于这个问题可能没有答案），而是一个不错的解决方案。
祝好运！