问导航栏在navbar-expand-md类的响应性问题

EN

<nav class="nav navbar navbar-expand-md bg-dark navbar-dark">
    <div class="row w-100">
        <div class="col-lg-2">
            <h1`enter code here` class="text-white text-center">
            LOGO
            </h1>
        </div> 
        <button class="navbar-toggler w-100" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button> 
        <div class="col-lg-8">
            <div class="collapse navbar-collapse text-center mx-auto justify-content-center" id="navbarSupportedContent">
                <ul class="navbar-nav text-centre mt-2" >
                    <li class="nav-item dropdown pr-4">
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                         <a class="dropdown-item" href="#">Action</a>
                         <a class="dropdown-item" href="#">Another action</a>
                         <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                        <a href="#" class="nav-link dropdown-item">home</a>
                    </li>
                    <li class="nav-item pr-4">
                        <a href="#" class="nav-link  dropdown-item">about</a>
                    </li>
                    <li class="nav-item pr-4">
                        <a href="#" class="nav-link  dropdown-item">blog</a>
                    </li>
                    <li class="nav-item pr-4">
                        <a href="#" class="nav-link  dropdown-item">Insights</a>
                    </li>
                    <li class="nav-item pr-4">
                        <a href="#" class="nav-link  dropdown-item">contact</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link  dropdown-item">Services</a>
                    </li>
                </ul>

            </div>
        </div>
        <div class="col-lg-2 col-md-12 pt-3 float-right justify-content-end ">
            <div class="text-center">
                <a href="#" class="pr-2 mb-0"><i class="fab fa-twitter"></i></a>
                <i class="fab fa-facebook pr-2 mb-0"></i>
                <i class="fab fa-instagram pr-2 mb-0"></i>
                <i class="fab fa-behance pr-2 mb-0"></i>
                <i class="fab fa-google pr-2 mb-0"></i>
                <i class="fab fa-pinterest"></i>
            </div>
        </div>
    </div>
</nav>