切换按钮在单击后立即显示？

Question

在引导程序中，我在小屏幕上包括了导航栏切换按钮。但是，单击该按钮时，它的位置更改为右侧。我搜索了不同的网络视频或教程，但没有帮助。

HTML：

       <nav class="navbar navbar-expand-md navbar-light">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Internet</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">TV</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Wireless</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link about" href="#">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">FAQ</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Blog</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="button">
                                <button>GET A QUOTE</button>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

CSS：

header div.other-info .navbar-toggler{
    padding:3px 6px;
    margin-left:155%;
}

Answer 1

HTML

                <div class="col-8 col-sm-8 other-info">
                    <h6>
                        <i class="fa fa-phone-alt" aria-hidden="true"></i>
                        [phone]
                    </h6>
                    <nav class="navbar navbar-expand-md navbar-light">
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="collapsibleNavbar">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Internet</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">TV</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Wireless</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link about" href="#">About Us</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">FAQ</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Blog</a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="button">
                                        <button>GET A QUOTE</button>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>