Question

我一直在尝试让我的网站的导航栏品牌文字做出响应：我希望它随着屏幕大小调整而变小。现在，发生的事情是我的品牌文字不会改变手机的尺寸。这会在navbar-brand上创建一个难看的导航栏链接堆叠。我试过把

@media (max-width: 400px) {
.navbar-brand {
    font-size: 14px;
}
}

在我的CSS中，但无济于事。有什么简单的东西我错过了吗？

这是一个屏幕截图，向您展示我的意思：

Medium-sized screens

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Sample Company Law Group, Inc.</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="attorneys.html">Attorneys</a>
                </li>
                <li>
                <a href="practice-areas.html">Practice Areas</a>
                </li>
                <li>
                <a href="references.html">References</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

https://jsfiddle.net/frzbpkjk/

Answer 1

首先，我测试了你的css并且它有效。您可以在此链接上看到一个示例：

http://codepen.io/eMineiro/pen/Kzjymp

<div class="navbar-brand">
  <p>Test</p>
</div>

1）问题可能在你的css代码上。检查你是否有另一个＆＃34; font-size＆＃34;这可能会使您的代码超载。

2）查看正在发生的事情的最简单方法是打开浏览器开发人员工具，并检查当媒体屏幕小于400像素时浏览器调用的样式

以下任何示例都可以覆盖您的代码：

/* Any media with max-width greater than 400px could override your code  */
@media (max-width: 500px) {  
.navbar-brand {
    font-size: XXpx;
}
}
/* Any media with min-width lower than 400px could override your code  */
@media (min-width: 200px) {  
.navbar-brand {
    font-size: XXpx;
}
}
/* Any media with max-width greater than 400px could override your code  */
@media (max-width: 500px) {  
.navbar-brand {
    font-size: XXpx;
}
}
/* Any media with min-width lower than 400px could override your code and max-width greater than 400px */
@media (min-width: 200px) and (max-width: 500px) {  
.navbar-brand {
    font-size: XXpx;
}
}

Bootstrap 3 Navbar Elements Stacking - navbar-brand not scaling

1 个答案: