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

问题描述

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

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

当激活下拉菜单时，我无法确定是什么导致这些元素移动。

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 Link to CodePen

解决方法

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

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

此外，您应该注意到引导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>

,

一点都没错

您只需对具有var par2 = table.getCell(i,j).getChild(0).asParagraph(); if(i>=1&&j>=3){ var paragraphText = par2.asText().getText(); var newexp = paragraphText.toUpperCase(); table.getRow(i).getChild(j).asText().setText(newexp); } 的折叠元素进行更改。

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

如下面的示例所示

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
}

结构之前

问题解决后的结构

,

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

.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;
  
}