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

Posted 2023-03-06

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

【英文标题】：Logo oversizes the Navbar in mobile view | Bootstrap

【发布时间】：2016-04-24 21:40:02

【问题描述】：

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

这是一个问题，它在移动视图中的导航栏过大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;

    

请帮助别人

【参考方案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?

【讨论】：

感谢 chetan 的反馈，您的解决方案对我很有帮助.. 再次感谢！！

【参考方案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 并调整边距以适应您的需求

【讨论】：

嗨 riaan，chetan 以前的解决方案对我有用，感谢您的帮助