Bootstrap 3. 为每个屏幕尺寸添加不同的导航栏品牌图像尺寸答案

【问题标题】：Bootstrap 3. Add different navbar brand image sizes per screen sizeBootstrap 3. 为每个屏幕尺寸添加不同的导航栏品牌图像尺寸
【发布时间】：2015-05-07 17:43:47
【问题描述】：

我有一个完美的 Bootstrap 3 网站。每个页面都包含一个导航栏品牌类和一个普通导航栏。我使用 navbar-brand 类在我的网站上显示徽标。它在主要浏览器和超大屏幕尺寸（投影仪/投影仪）和普通台式机/笔记本电脑/平板电脑屏幕尺寸上都能正常工作。

我遇到的唯一问题是徽标确实使用“img-responsive”类在移动设备上移动并调整了一些大小，并且它很好地定位在其父元素中，但对于我的口味来说它有点太大（移动尺寸，4.3 和 5.5 英寸）。它推送到浏览器的上一行和导航栏的下一行。如何修改我的 navbar-brand 类以针对这些屏幕尺寸（

我可以在我的 CSS 中添加针对这些屏幕尺寸的媒体查询并添加自定义宽度和高度属性吗？我还有什么需要做的吗？

我是 Web 开发的新手，对于这部分我不知道自己在做什么。

我的导航栏代码：

               <div class="navbar navbar-default navbar-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand" href="index.html"><img class="img-responsive" alt="Logo" src="images/logo_final.png"></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a class="active" href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="#">An element</a>
                            <ul class="dropdown">
                                <li>Some elements</li>
                                <li>Some elements</li>
                            </ul>
                        </li>
                        <li>
                        </li>
                                <li>Some elements</li>
                                <li>Some elements</li>
                                <li>Some elements</li>
                    </ul>
                </div>
            </div>
        </div>

是的......我们将非常感谢您的帮助。

提前谢谢你

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

一种方法是：

引导层：http://www.bootply.com/J4vixbmovW

代码：

                    <a class="navbar-brand visible-xs" href="index.html"><img class="img-responsive" alt="Logo xs" src="images/logo_final.png"></a>
                    <a class="navbar-brand visible-sm" href="index.html"><img class="img-responsive" alt="Logo sm" src="images/logo_final.png"></a>
                    <a class="navbar-brand visible-md" href="index.html"><img class="img-responsive" alt="Logo md" src="images/logo_final.png"></a>
                    <a class="navbar-brand visible-lg" href="index.html"><img class="img-responsive" alt="Logo lg" src="images/logo_final.png"></a>

PS：

看看这个类：visible-[xs|sm|md|lg]

文档：http://getbootstrap.com/css/#responsive-utilities

【讨论】：

谢谢，但我在媒体查询方面搞砸了一些，并以我想要的方式得到了它们。在我问之前我应该尝试过。