色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

bootstrap 4 beta navbar-帶有img-fluid類的品牌徽標在折疊時不會調整大小

CSS
阮建安1年前8瀏覽0評論

使用Bootstrap 4 beta。

我的響應式navbar在左側包含一個navbar品牌的標志，在右側包含一個鏈接的內嵌菜單。當視口改變時，導航條正確地折疊，但是徽標沒有像它應該的那樣收縮。這將強制漢堡包在最小視窗的徽標下換行。

我希望徽標縮小到不需要包裹托格勒按鈕的程度。

MIG標志

<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"  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" >
                    <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;
    }        
}

它完美地工作。

這讓我在手機上縮小了logo:

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

你應該像這樣為你的標志設置固定的尺寸:

<link rel="stylesheet"  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>