带有 img-fluid 类的 Bootstrap 4 beta 导航栏品牌徽标在折叠时不会调整大小

使用 Bootstrap 4 beta。

我的响应式导航栏左侧包含导航栏品牌中的徽标，右侧包含链接的内联菜单。当视口更改时，导航栏会正确折叠，但徽标不会按预期收缩。这会迫使汉堡包包裹在徽标下方以获得最小的视口。

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

米格标志

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

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

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

它工作得很好。

这对我来说适用于缩小移动设备上的徽标：

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

您应该像这样为徽标设置固定尺寸：

<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

相关内容

最新更新

热门标签：