Bootstrap 4-如何防止折叠菜单折叠导航栏中的所有元素

Question

我正在使用bootstrap 4导航栏，并且当单击汉堡菜单时，我想防止徽标和语言开关移动并折叠到菜单上。这是我的所有代码。另外，这是我的Codepen的链接。这可能吗？

https://codepen.io/asizemore/pen/LYEgvOy?editors=1100

CSS

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

HTML

<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>

Answer 1

在.navbar-item之后，将语言开关置于.navbar-brand内，并给它一个order: 1（比0的默认值大-因此它将是最后一个），间隔为您的导航栏未折叠。由于您使用的是navbar-expand-lg，因此它将是@media (min-width: 992px)，但是如果使用的是navbar-expand-md，则它本来应该是min-width: 768px-或是576px的sm。有关responsive breakpoints here的更多信息。

导航折叠时，您不需要更改顺序，因此语言切换器显示在菜单之前。看到它正常工作：

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

@media(min-width: 992px) {
  .language-switch {
    order: 1;
  }
}

<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="nav-item 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>
  </div>


  <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>

  </nav>

哦，您需要提出一种解决方案，以解决在它们实际上不适合一行时（设备比〜450px窄的情况）如何对齐这三个（徽标，语言切换器和切换器）的问题。但这是您基本上要求的一个问题。

Answer 2

我认为这是不可能的，因为由于Bootstrap的设计，当屏幕尺寸减小并且无法将所有元素都放在一行中时，所有内容都会移动。

您可以做的另一种选择是，在想要使导航栏保持纤细的情况下，只要按钮不适合屏幕时都<按钮。因此，我建议您看一下Boostrap的hiding utilities，您可以在其中使元素消失。请参考此笔：https://codepen.io/crimsonpython24/pen/Jjomqxe?editors=1000

<!--   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>


  <!-- d-none d-sm-block -->
  <a class="navbar-brand  d-none d-sm-block" 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 -->

  <!-- d-none d-sm-block -->
  <div class="btn-group btn-toggle lang mr-1 d-none d-sm-block">
    <input type="button" name="lang" class="btn" value="ENG">
    <input type="button" name="lang" class="btn active" value="SPA">
  </div>
</nav>

但是，由于质量可能会失真，因此我不建议更改图像的分辨率。