Question

昨天我问this 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;
}

使Bootsrap导航栏中的文字响应

2 个答案: