如何防止此导航栏崩溃？

Question

＆＃13;

＆＃13;

        /* dropdown-menu related */
        .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
            background-color: transparent !important;
        }

        .nav > li a.dropdown-toggle {
            text-align: right;
        }

        .dropdown-menu {
            min-width: 20px !important;
        }
        /* navbar icons */
        .nav {
        //  display: flex;
            width: 100%;
        }

        .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
            background-color: transparent;
        }

        .nav > li {
            display: inline-block !important;
        }

        .nav_li_last_options {
            float: right;
        }

        @media (min-width: 768px) {
            .navbar-nav > li.nav_li_last_options {
                float: right;
            }
        }
        @media (min-width: 768px) {
            .navbar-nav > li.nav_li_middle_toggle {
                float: left;
            }
        }

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top navbar_base">
    <div class="container-fluid padding_right_0">
        <ul class="nav navbar-nav navbar_ul_base" style="max-height: 50px;">
            <li><a href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment"></i></a></li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding: 15px; text-align: left">
                    <i class="glyphicon glyphicon-search"></i>
                </a>
                <ul class="dropdown-menu dropdown_menu_base">
                    <li><a href="#">HTML</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

我使用bootstrap3和jquery3。

问题： 当我点击search icon时，导航栏形状会崩溃。

当我点击ul并打开下拉菜单时，即使search icon标记的高度似乎更大，我也无法知道如何修复它。

问题：

我该怎样防止这种情况？为什么会这样？