具有 img-fluid 类的 Bootstrap 4 beta navbar-brand 徽标在折叠时不会调整大小答案

【问题标题】：Bootstrap 4 beta navbar-brand logo with img-fluid class does not resize when collapsed具有 img-fluid 类的 Bootstrap 4 beta navbar-brand 徽标在折叠时不会调整大小
【发布时间】：2022-01-19 15:03:20
【问题描述】：

使用 Bootstrap 4 测试版。

我的响应式导航栏在左侧的导航栏品牌中包含一个徽标，在右侧包含一个内联链接菜单。当视口发生变化时，导航栏会正确折叠，但徽标不会按应有的方式缩小。这会迫使汉堡包在最小视口的徽标下方。

我希望徽标缩小到不需要包裹切换按钮的程度。

MIG Logo

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
 
    <style>
    #wrapper {
        min-height:100%; /* For Sticky Footer */
        position:relative;
    } 

    .mig-header-menu-bar{
        border-style: solid;
        border-width: 3px;
        border-color: #7C9D63;
    }

    .mig-header-menu-bar a:link, a:visited{
        color: #00008B;
        text-decoration: none;
    }

    .mig-header-menu-bar a:hover, a:active {
        color: #7C9D63;
        text-decoration: none;
    }

    .mig-header-menu-toggle-button{
        color: white;
        background-color: #7C9D63;
        max-height: 50px;   
        z-index: 9900;
        margin-top: 1.5rem;   
    }

    .mig-header-menu-bar  .nav-pills  .nav-item.show  .nav-link  {    
        background-color: #7C9D63;
    }

    .mig-header-menu-bar  .dropdown-menu {
        border-bottom-width: 4px;
        border-bottom-color: #7C9D63;
    }

    .more-rounded {
        border-radius: .50rem;
    }
    
    </style>
 
</head>



<body>
    <div id ="wrapper">
        <nav class="navbar navbar-expand-md navbar-toggleable fixed-top pt-0" style="background-color: #515254;">  <!-- navbar-expand  -->
            <div class="nav w-100 justify-content-between align-middle">
                <a class="navbar-brand mt-2" href="http://www.methodinvestmentgroup.com">
                    <img class="img-fluid" alt="Method Investment Group logo" src="https://i.stack.imgur.com/s3oSY.jpg">
                </a>
                <!-- </div>    -->
                <button class="navbar-toggler mig-header-menu-toggle-button" type="button" data-toggle="collapse" data-target="#MIGnavbarToggler" aria-controls="MIGnavbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon ">&#9776;</span>
                </button>

                <div class="collapse navbar-collapse justify-content-end " id="MIGnavbarToggler">    
                    <div class='mig-header-menu-bar more-rounded bg-faded'>
                        <ul class='nav nav-pills more-rounded bg-light' >
                            <li class='nav-item'>
                                <a class='nav-link' href="index.php">Login</a>
                            </li> 
                            <li class='nav-item'>
                                <a class='nav-link' href="About.php">About Us</a>
                            </li>                                                          
                            <li class='nav-item'>
                                <a class='nav-link' href="ShowFAQ.php">Frequently Asked Questions</a>
                            </li>             
                        </ul>
                    </div>                        
                </div>  <!-- End of collapse div  -->
            </div>
        </nav>



    <!-- jQuery first, then Popper, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

【问题讨论】：

您是否期望.img-fluid 本身会导致尺寸发生变化？包装器 (navbar-brand) 的尺寸永远不会改变，所以 img-fluid 什么都不做。您可能需要通过媒体查询进行调整，您是否尝试过？
你是对的，罗伯特。我添加了一个媒体查询来限制 navbar-brand 的 max-with 并且效果很好。

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

我向父 div 和以下媒体查询添加了一个 id：

@media screen and (max-width: 340px){
    #mig-header > a {
        max-width: 200px;
    }
    #mig-header > button {
        padding: 0.25rem;
    }        
}

效果很好。

【讨论】：

【解决方案2】：

这对我来说可以缩小移动设备上的徽标：

.navbar-brand img {
    max-width: 100%;
}

【讨论】：

【解决方案3】：

您应该为您的徽标设置固定尺寸，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="https://placehold.it/60" width="30" height="30" alt="">
  </a>
</nav>

这是因为导航栏的高度不会改变，这是官方推荐的做法：

https://getbootstrap.com/docs/4.0/components/navbar/#brand

【讨论】：

P.S. Bootstrap 4 beta 现在已经过时了。引导程序 4.0.0。 final 是最新的。