Question

我有一个非常好的Bootstrap 3网站。每个页面都包含一个navbar-brand类和一个普通的navbar。我使用navbar-brand类在我的网站上显示徽标。它适用于主流浏览器和超大屏幕尺寸（投影仪/投影仪）和普通台式机/笔记本电脑/平板电脑屏幕尺寸。

我遇到的唯一问题是徽标确实移动并使用＆＃34; img-responsive＆＃34;在移动设备上调整大小。 class，它很好地定位在它的父元素中，但根据我的口味，它有点太大（在移动尺寸，4.3和5.5英寸）。它会推到浏览器的上一行和导航栏的底线。如何修改我的navbar-brand类以显示那些屏幕尺寸（<7英寸）的小徽标？

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

我是网络开发的新手，有了这部分，我不知道自己在做什么。

我的导航栏代码：

               <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>

是的......非常感谢一些帮助。

提前谢谢

Answer 1

一种方法是：

Bootply ：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

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

1 个答案: