移动视图中的徽标超大导航栏 |引导程序

Question

搜索了同一问题的主题，但找不到解决方案。

这是一个问题，它在移动视图中的导航栏过大check image, test logo

这里是代码

    <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container-fluid">

        <div class="navbar-header">

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="index.html"><img src="img/logo.png" id="logo"></a>

        </div>

        <div class="collapse navbar-collapse">

            <ul class="nav navbar-nav navbar-right" id="navSocial">

               <li><a href="https://www.facebook.com/" target="_blank"><img src="images/sm-icons/F.png" style="height:50px; width:50px;"></a></li>
               <li><a href="https://www.twitter.com/" target="_blank"><img src="images/sm-icons/T.png" style="height:50px; width:50px;"></a></li>
               <li><a href="https://www.instagram.com/" target="_blank"><img src="images/sm-icons/I.png" style="height:50px; width:50px;"></a></li>

            </ul>

           <ul class="nav navbar-nav navbar-right" id="navMenu">

               <li><a href="#home">Home</a></li>
               <li><a href="#story">The Story</a></li>
               <li><a href="#services">Services</a></li>
               <li><a href="#portfolio">Portfolio</a></li>
               <li><a href="#contact">Contact Us</a></li>

            </ul>

        </div>

    </div>

    </nav>

这里是 CSS

    #logo{
        height:64px;
        width:156px;
    }

    #navMenu{

        margin-top: 25px;
        font-family: "MV Boli";
        font-size: 20px;
    }



    #navSocial{
         margin-top: 8px;
    }

    #navMenu li a:hover{
         font-family: "MV Boli";
        font-weight: bold;
        background-color: #FFDD00;

    }

请帮助别人

Answer 1

要在移动视图中设置您的徽标，您必须使用媒体查询

@media screen and (max-width:320px){
#logo{
    height:24px;
    width:48px;
}}


@media (min-width:321px) and (max-width: 770px){
#logo{
    height:48px;
    width:96px;
}}

如需了解更多详情，请访问此链接： Twitter Bootstrap 3: how to use media queries?

Answer 2

试试你的 css 标志，像这样：

#logo {
height: 50px; //Or the desired height till it fits
position: absolute;
top: 0; //Here you can adjust how far from the top you need it
}

然后只需将 img-responsive 类添加到 html 并调整边距以适应您的需求