Bootstrap 4 导航栏内容在打开下拉菜单时移动

Question

我有一个使用 Bootstrap 4.3.1 创建的导航栏。 它看起来像这样：

但是，当单击汉堡菜单以显示链接时，导航栏的内容会向右移动。 BrandName 移动到内容区域的右侧，搜索框和用户图标移动到下拉链接下方，如下所示：

当下拉菜单被激活时，我无法确定是什么导致这些元素发生变化。

HTML

<nav class="navbar navbar-expand-xs fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <span class="md-blue">Brand</span>Name
        </a>
        <!-- mobile links toggle -->
        <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#main-links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars"></i>
        </button>
        <!-- mobile links -->
        <div class="collapse navbar-collapse" id="main-links">
                <div class="row">
                        <ul class="navbar-nav mb-3 pl-0">
                            <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Link 4</a></li>
                        </ul>
                </div>
        </div>
        <!-- Search box -->
        <div class="">
            <div class="input-group w-75 mx-5">
                <input type="text" class="form-control form-control-sm" placeholder="Search">
                <div class="input-group-append">
                    <button class="btn btn-sm md-blue-bg" type="submit">
                    <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- user links toggle --> 
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#user-links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-user-circle"></i>
        </button>
        <!-- mobile: user links -->
        <div class="collapse navbar-collapse" id="user-links">
                <ul class="navbar-nav mb-3 pl-0">
                    <li class="nav-item"><a class="nav-link" href="#">My Account</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Log Out</a></li>
                </ul>
        </div>
    </div>
</nav>

CSS

.navbar { 
background-color: #1d2d4a;
padding: 0 1rem !important;
/* min-height: 70px; */
}

.navbar .btn {
    color: #fff;
    font-weight: 500;
}

.navbar .login {
    color: #fff;
}

.navbar .login a {
    color: #02bdf7;
}

.navbar .login a:hover {
    text-decoration: underline;
}

.navbar-brand { 
    color: #fff;
    font-family: 'roundregular';
    font-size: 2.4rem;
    padding-left: 15px;
}

a:hover.navbar-brand {
    color: #fff;
}

.dropdown-menu { 
    background-color: #1d2d4a;
    border: none;
    border-radius: 0;
    border-bottom-left-radius: .37rem;
    border-bottom-right-radius: .37rem;
    margin-top: 1.1rem;
    padding: 0 0 .375rem 0;
}

.dropdown-menu a {
    color: #fff;
}

.dropdown-menu a:hover {
    background-color: transparent;
    color: #3167eb;
}

a.dropdown-item i { font-size: 12px; }

a.nav-link { color: #fff; }
a.nav-link:hover { color: #3167eb; }

/* mobile toggles */
.navbar-toggler { 
    border: none;
    color: #fff; 
}

button.navbar-toggler i.fa { font-size: 24px; }

/* desktop menu */

/* mobile menu */
.nav-link-header {
    color: #02bdf7;
    font-size: 1.25rem;
}

/* navbar search */
.navbar-search-icon {
    background-color: #02bdf7;
    border: 1px solid #02bdf7
}

CodePen链接到 CodePen

Answer 1

订单很重要。 移动链接被置于一切之上。 这就是为什么当您打开菜单图标并破坏设计时其他divs会下降的原因。

因此，如果您稍微更改顺序并将mobile links容器放在.container的末尾，则不会发生奇怪的行为。 但我不确定这是否是您希望它在大屏幕上看起来的样子？

此外，您应该注意到 bootstrap 4 中没有像navbar-expand-xs这样的类，因此您应该将其替换为navbar-expand-(size you want) sm - md -lg -xl

请记住，如果这不是您想要的顺序，您可以随时使用order并修复它。

如果这没有帮助，请让我知道并向我展示所需输出的屏幕截图，我会尽力帮助您。

 .navbar { background-color: #1d2d4a; padding: 0 1rem !important; /* min-height: 70px; */ } .navbar .btn { color: #fff; font-weight: 500; } .navbar .login { color: #fff; } .navbar .login a { color: #02bdf7; } .navbar .login a:hover { text-decoration: underline; } .navbar-brand { color: #fff; font-family: 'roundregular'; font-size: 2.4rem; padding-left: 15px; } a:hover.navbar-brand { color: #fff; } .dropdown-menu { background-color: #1d2d4a; border: none; border-radius: 0; border-bottom-left-radius: .37rem; border-bottom-right-radius: .37rem; margin-top: 1.1rem; padding: 0 0 .375rem 0; } .dropdown-menu a { color: #fff; } .dropdown-menu a:hover { background-color: transparent; color: #3167eb; } a.dropdown-item i { font-size: 12px; } a.nav-link { color: #fff; } a.nav-link:hover { color: #3167eb; } /* mobile toggles */ .navbar-toggler { border: none; color: #fff; } button.navbar-toggler i.fa { font-size: 24px; } /* desktop menu */ /* mobile menu */ .nav-link-header { color: #02bdf7; font-size: 1.25rem; } /* navbar search */ .navbar-search-icon { background-color: #02bdf7; border: 1px solid #02bdf7 }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <nav class="navbar navbar-expand-lg fixed-top"> <div class="container"> <a class="navbar-brand" href="#"> <span class="md-blue">Brand</span>Name </a> <!-- mobile links toggle --> <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#main-links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars"></i> </button> <!-- Search box --> <div class=""> <div class="input-group w-75 mx-5"> <input type="text" class="form-control form-control-sm" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-sm md-blue-bg" type="submit"> <i class="fa fa-search"></i> </button> </div> </div> </div> <!-- user links toggle --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#user-links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-user-circle"></i> </button> <!-- mobile: user links --> <div class="collapse navbar-collapse" id="user-links"> <ul class="navbar-nav mb-3 pl-0"> <li class="nav-item"><a class="nav-link" href="#">My Account</a></li> <li class="nav-item"><a class="nav-link" href="#">Log Out</a></li> </ul> </div> <!-- mobile links --> <div class="collapse navbar-collapse" id="main-links"> <div class="row"> <ul class="navbar-nav mb-3 pl-0"> <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li> <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li> <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li> <li class="nav-item"><a class="nav-link" href="#">Link 4</a></li> </ul> </div> </div> </div> </nav> <!-- JS, Popper.js, and jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"> </script>

Answer 2

一点都没有错

您只需对具有id="main-links"折叠元素进行一项更改。

您必须将主链接折叠在容器底部。

正如你在下面的例子中看到的

 .navbar { background-color: #1d2d4a; padding: 0 1rem !important; /* min-height: 70px; */ } .navbar .btn { color: #fff; font-weight: 500; } .navbar .login { color: #fff; } .navbar .login a { color: #02bdf7; } .navbar .login a:hover { text-decoration: underline; } .navbar-brand { color: #fff; font-family: 'roundregular'; font-size: 2.4rem; padding-left: 15px; } a:hover.navbar-brand { color: #fff; } .dropdown-menu { background-color: #1d2d4a; border: none; border-radius: 0; border-bottom-left-radius: .37rem; border-bottom-right-radius: .37rem; margin-top: 1.1rem; padding: 0 0 .375rem 0; } .dropdown-menu a { color: #fff; } .dropdown-menu a:hover { background-color: transparent; color: #3167eb; } a.dropdown-item i { font-size: 12px; } a.nav-link { color: #fff; } a.nav-link:hover { color: #3167eb; } /* mobile toggles */ .navbar-toggler { border: none; color: #fff; } button.navbar-toggler i.fa { font-size: 24px; } /* desktop menu */ /* mobile menu */ .nav-link-header { color: #02bdf7; font-size: 1.25rem; } /* navbar search */ .navbar-search-icon { background-color: #02bdf7; border: 1px solid #02bdf7 }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></link> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> <nav class="navbar navbar-expand-xs fixed-top"> <div class="container"> <a class="navbar-brand" href="#"> <span class="md-blue">Brand</span>Name </a> <!-- mobile links toggle --> <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#main-links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars"></i> </button> <!-- Search box --> <div class=""> <div class="input-group w-75 mx-5"> <input type="text" class="form-control form-control-sm" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-sm md-blue-bg" type="submit"> <i class="fa fa-search"></i> </button> </div> </div> </div> <!-- user links toggle --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#user-links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-user-circle"></i> </button> <!-- mobile: user links --> <div class="collapse navbar-collapse" id="user-links"> <ul class="navbar-nav mb-3 pl-0"> <li class="nav-item"><a class="nav-link" href="#">My Account</a></li> <li class="nav-item"><a class="nav-link" href="#">Log Out</a></li> </ul> </div> <!-- mobile links --> <div class="collapse navbar-collapse" id="main-links"> <div class="row"> <ul class="navbar-nav mb-3 pl-0"> <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li> <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li> <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li> <li class="nav-item"><a class="nav-link" href="#">Link 4</a></li> </ul> </div> </div> </div> </nav> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

结构前

问题解决后的结构

Answer 3

将位置和显示更改为内联对我有帮助

.dropdown-toggle[aria-expanded="true"]:after{
  position:initial !important;
  display:inline !important;
  padding-right: 0px !important;  
  padding-bottom: 0px !important;
  padding-top: 0px !important;
  width: 0px !important;
  min-width: 0rem !important;
  padding-left: 4px !important;
  margin:0ox !important;
  
}

.dropdown-toggle[aria-expanded="false"]:before{
  padding-left: 4px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
  position: initial !important;
  display: inline !important;  
  width: 0px !important;
  min-width: 0rem !important;  
}

a#dropdown-menu-align-right.dropdown-toggle::after{
  margin:0px !important;  
  vertical-align: initial !important;
  
}