使Bootsrap導航欄中的文本響應

Question

昨天我問了這個問題，關於如何根據布局將導航欄菜單從水平更改為垂直堆疊，但是現在我注意到，當我使文本適合大型顯示器時，將窗口縮小時它不起作用。 有什么辦法可以使我的文字更具響應性？ 如果沒有，您還有其他菜單方法嗎？ 另外，水平時如何將菜單按鈕居中？

我的JSFiddle

我的CSS

.menu {
    background-color: rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    -ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
}
.menutext {
    color: #FFFFFF;
    font-size: 2em;
    white-space: nowrap;
}
.row.text-center > div {
    display: inline-block;
    float: none;
}
/*-----------------------------------------------------------
            Bootstrap Overrides
-----------------------------------------------------------*/
 * {
    border-radius: 0 !important;
}
.navbar-default {
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    position: relative;
    top: -58px;
    padding: 0px;
    margin: 0px;
    border: 0px;
}
.navbar-default .navbar-nav > .active {
    color: #000;
    background: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:link, .navbar-default .navbar-nav > .active > a:visited {
    color: #000;
    background: #ffffff;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #000000;
    background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #000000;
    background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #000000;
    border-bottom-color: #000000;
}
.navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #000000;
    border-bottom-color: #000000;
}
.navbar-default .navbar-toggle {
    border-color: #d65c14;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #e4e4e4;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
/*Style for Bigger Screens*/
 @media (min-width: 768px) {
    .navbar-default a {
        color: white;
    }
    .navbar-default li a:hover {
        color: black;
    }
}
/*Style for Smaller Screens*/
 @media (max-width: 767px) {
    .navbar-default {
        top: 0px;
        background: #808184;
    }
    .navbar-default li {
        border-bottom: 1px;
        border-bottom-style:solid;
        border-color:#FFF;
    }
}

我的HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12" style="background-color:#FABC41; height: 50px;">BAR</div>
    </div>
    <div class="row">
        <div class="col-sm-12" style="padding:0;">
            <img class="img-responsive" src="http://travelandwildlifephotography.com/wp-content/uploads/2014/07/Camping-on-Fraser-Island1.jpg" alt="CLI Engage">
        </div>
    </div>
</div>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a class="menutext" href="Home.html">Home</a>

                </li>
                <li><a class="menutext" href="AboutUs.html">About Us</a>

                </li>
                <li class="dropdown"> <a class="dropdown-toggle menutext" data-toggle="dropdown" href="#">Tools<span class="caret"></span></a>

                    <ul class="dropdown-menu">
                        <li><a class="menutext" href="#">Child Progres Monitoring</a>

                        </li>
                        <li><a class="menutext" href="#">Online Courses</a>

                        </li>
                        <li><a class="menutext" href="#">Classroom Observation Tools</a>

                        </li>
                        <li><a class="menutext" href="#">Coaching & Collaboration Tools</a>

                        </li>
                        <li><a class="menutext" href="#">Activities</a>

                        </li>
                        <li><a class="menutext" href="#">Texas Kindergarten Entry Assessment</a>

                        </li>
                    </ul>
                </li>
                <li><a class="menutext" href="#">Parents & Families</a>

                </li>
                <li><a class="menutext" href="#">Parents & Families</a>

                </li>
                <li><a class="menutext" href="#">Calendar</a>

                </li>
                <li><a class="menutext" href="#">Contact Us</a>

                </li>
                <li><a class="menutext" href="#">Help</a>

                </li>
                <li><a class="menutext" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>

                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

您可以使用視口單位使文本響應。 vw, vh, vmin, vmax 這些是視圖寬度，視圖高度，最小視圖，最大視圖。 這些將隨您的屏幕尺寸縮放。 例如：1vw =屏幕寬度的1％。 請注意，這與舊的瀏覽器不兼容。

CSS示例

font-size:3.5vmin;

Answer 2

您可以使用媒體查詢在移動設備視圖中設置字體大小

@media screen and (max-width: 480px) 
{
    body {
        font-size: 1.5em;
    }
}

並居中對齊按鈕，請添加此類-

.nav li a {
  text-align: center;
}