html - 如何让我的导航栏品牌响应低分辨率？

Question

当我调整浏览器大小时或在我的低分辨率移动设备上使用它时，我的导航栏品牌会消失。

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 :

好:

差:

更糟的是:

Answer 1

我很幸运地使用了 FitText ，一个 jQuery 插件，可以让文本适合它的父元素。

来自他们的网站:

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

不完全是“答案”(对于这个问题可能没有答案)，而是一个不错的解决方案。

祝你好运!