Question

Using Bootstrap 4 beta.

My responsive navbar contains a logo in the navbar-brand on the left side and an inline menu of links on the right side. When the viewport changes, the navbar collapses correctly, but the logo does not shrink as it should. This forces the hamburger to wrap below the logo for the smallest viewports.

I would like the logo to shrink to the point where wrapping the toggler button is not necessary.

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>

Answer 1

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

    public static class A {
}

public  static void main(String[] args) throws Exception{
    A a = new A();

    ReferenceQueue<A> rq = new ReferenceQueue<A>();
    WeakReference<A> aref = new WeakReference<A>(a, rq);    
    a = null;

    //aref.get() should be a, aref.isEnqueued() should return false, rq.poll() should return null
    System.out.println( "0: " + aref + " : " + aref.get() + " : " + aref.isEnqueued() + "  " + rq.poll() ); 

    Thread.sleep(1000);

    System.out.println("Running GC.");
    Runtime.getRuntime().gc();  //let GC clear aref
    System.out.println("GC ran.");

    //aref.get() should be null, aref.isEnqueued() should return false, rq.poll() should return null
    System.out.println( "1: " + aref + " : " + aref.get() + " " + aref.isEnqueued() + "  " + rq.poll()  );   

    //give some time for GC to enqueue aref
    Thread.sleep(1000);

    //ref.get() should be null, aref.isEnqueued() should return true, rq.poll() should return aref
    System.out.println( "2: " + aref + " : " + aref.get() + " " + aref.isEnqueued() + "  " + rq.poll() );  
}

效果很好。

Answer 2

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

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

Answer 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

Bootstrap 4 beta navbar-brand logo with img-fluid class does not resize when collapsed

3 个答案: