html - 导航栏容器移动折叠全宽(容器流体)

Question

我有一个容器 div，其中有我的 Logo ，右边有我的菜单，我想做的是，当导航栏达到移动屏幕大小时，我希望每个

成为在一行中，每一行都是容器流体的大小，目前的问题是每个 li 的大小都与我的容器相同，我该如何更改？

这是我的代码:

    <div id="navigation_bar">
        <div class="content">
            <div id="logo">
                <a href="index.html">
                    <img class="logo_dark" src="images/virtuai/logo-dark.png" alt="Enar Logo">
                    <img class="logo_light" src="images/logo-light.png" alt="Enar Logo">
                </a>
            </div>
            <nav id="main_nav navbar-right">
                <div id="nav_menu">
                    <span class="mobile_menu_trigger">
                            <a href="#" class="nav_trigger"><span></span></a>
                    </span>
                    <ul id="navy" class="clearfix" style="float:right">
                        <li class="normal_menu mobile_menu_toggle current_page_item">
                            <a href="index.html"><span>HOME</span></a>
                        </li>
                        <li class="normal_menu mobile_menu_toggle current_page_item">
                            <a href="index.html"><span>ABOUT US</span></a>
                        </li>
                        <li class="normal_menu mobile_menu_toggle current_page_item">
                            <a href="index.html"><span>SOLUTIONS</span></a>
                        </li>
                        <li class="normal_menu mobile_menu_toggle current_page_item">
                            <a href="index.html"><span>CONTACT US</span></a>
                        </li>
                    </ul>
                </div>
            </nav>
            <!-- End Nav -->
            <div class="clear"></div>
        </div>

Answer 1

试试这个代码.. 覆盖 Bootstrap 容器宽度

@media screen and (max-width: 768px) {
  body .container{
    width:100% !important;
  }
}