Html 引导程序4-如何防止折叠菜单折叠导航中的所有元素

我使用的是Bootstrap4NavBar，我想防止图标和语言开关在点击汉堡包菜单时随菜单一起移动和折叠。这是我所有的代码。还有，这里是我的代码笔的链接。这可能吗

CSS

HTML

!--   导航条-->

将语言开关放在

.navbar项目

内，紧跟在

.navbar品牌

之后，并在

.navbar

未折叠的时间间隔内给它一个

命令：1

（该命令大于默认值

0

，因此它将显示为其父项的最后一项）。由于您使用的是

.navbar expand lg

，因此它将是

@媒体（最小宽度：992px）

，但如果您使用

.navbar expand md

它将是

最小宽度：768px

-或

576px

用于

-sm

。更多关于

当导航折叠时，您不需要更改顺序，因此语言切换器显示在菜单之前（这就是我们将其放在徽标之后的原因）。看到它工作了吗

.logo{
最大宽度：130像素；
}
.btn{
字体系列：“Muli”，无衬线；
字号：900；
}
.btn{
背景：rgb（142,63,41）；
颜色：rgb（202171159）；
}
.主动{
背景：rgb（166,73,47）；
颜色：白色；
}
@介质（最小宽度：992px）{
.语言开关{
顺序：1；
}
}

您可以通过在标记之后（按钮之前）替换“徽标”来保留“徽标”，但对于“语言切换”，您必须自己完成。Bootstrap没有为它提供任何类。多么巧妙的解决方案，谢谢！

.logo {
  max-width: 130px;
}

.btn {
  font-family: 'Muli', sans-serif;
  font-weight: 900;
}

.btn {
  background: rgb(142, 63, 41);
  color: rgb(202, 171, 159);
}

.active {
  background: rgb(166, 73, 47);
  color: white;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

!--   NAV BAR -->
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand mt-lg-0" href="#"><img src="https://via.placeholder.com/200x50" class="logo img-fluid"></a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mx-auto mt-2 mt-lg-0">
      <li class="nav-item">
        <a class="nav-link" href="#">PURPOSE</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">FAMILY</a>
      </li>
       <li class="nav-item">
        <a class="nav-link" href="#">AGRICULTURE</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ART</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CONTACT</a>
      </li>

    </ul>

  </div>

<!--   LANGUAGE SWITCH -->

<div class="btn-group btn-toggle lang mr-1"> 
  <input type="button" name="lang" class="btn" value="ENG">

  <input type="button" name="lang" class="btn active" value="SPA">
</div>
</nav>