可折叠导航栏上的Bootstrap标头调整

JS小提琴链接

这是我当前标题的外观

我有一些我想实现的目标：

1。将可折叠栏和图像保持在同一行上

当它调整为较小的窗口时，我希望将其“锁定”在一行上：

由于我未在下拉列表中添加图片，因此图片和可折叠栏是分开的

  <a class="navbar-brand" href="main">
    <img src="img/logo_header.png" class="img-responsive img-header" width="200">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
  </div>

2。在可折叠导航栏中的底部添加链接

将列表（六分之一）与导航栏一起显示，当前它们是分开的。

此外，如果我尝试将其添加到<div class="collapse navbar-collapse" id="navbarSupportedContent">内，它会包含在同一行中并破坏设计。

<div class="collapse navbar-collapse" id="navbarSupportedContent">
 <div class="mwc-orange-nav">
    <div class="container">
      <div class="row px-4">
        <div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
          <a href="" class="menu-header">
            One</a>
        </div>
        <div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
          <a href="" class="menu-header">
            Two</a>
        </div>
        <div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
          <a href="" class="menu-header">
            Three</a>
        </div>
        <div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
          <a href="" class="menu-header">
            Four</a>
        </div>
        <div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
          <a href="" class="menu-header">
            Five</a>
        </div>
        <div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
          <a href="" class="menu-header">
            Six</a>
        </div>
      </div>
    </div>
</div>

任何帮助将不胜感激，谢谢。

请尝试使用此代码。我们对结构进行了一些更改。

.navbar.navbar-expand-md.navbar-light { padding: 0; flex-direction: column; -webkit-flex-direction: column; }
.menu-top .login-btn { padding: 0 10px;}
.navbar-expand-md > .container > div { width: 100%; }
.menu-top { display: flex; display:-webkit-flex; align-items: center; -webkit-align-items: center;}
.navbar-expand-md .navbar-collapse { width:100%;}
.menu-box {
  padding: 0px 45px;
}

.menu-box a {
  color: white !important;
}

.menu-box:hover {
  background-color: white;
}

.menu-box:hover a {
  color: #f08400 !important;
  text-decoration: none;
}

.mwc-orange-nav {
  background-color: rgb(240,132,0.8);
}

.bg-blue{
  background: #00a6a6 !important;
  border-color: #00a6a6 !important;
}

.curve-right {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

.fa-search {
    color: 
    #fff !important;
}

.header-font {
  font-size: 18px;
  color: #00a6a6;
}

.header-font:hover {
  text-decoration: none;
  color: #007070;
}

.header-box {
  box-sizing: content-box;
  padding: 5px 25px;
  border-radius: 10px;
  border: 2px solid #00a6a6;
  color: #00a6a6;
}

.header-box:hover {
  text-decoration: none;
  color: white;
  background-color: #00a6a6;
}

@media(max-width:767px){
  .menu-top { padding: 0 10px; display: block; }
  .menu-box { flex-basis: auto; -webkit-flex-basis: auto; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="nav-header"> <!-- start header -->
    <nav class="navbar navbar-expand-md navbar-light">
      <div class="container pt-3">
        <div class="menu-top">      
        <a class="navbar-brand" href="main">
          <img src="https://www.webkit.org/blog-files/acid3-100.png" class="img-fluid" width="200">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <form action="cards/search.php" method="POST" class="d-inline w-50 mx-auto">
            <div class="input-group">
              <input type="text" name="text-search" id="searchBox" class="form-control search-bar" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="Search" required>
              <div class="input-group-prepend">
                <button type="submit" name="submit-search" class="input-group-text bg-blue curve-right"> <i class="fas fa-search"></i> </button>
              </div>
            </div>
            <div id="response" class="scrollbar-design search-content"></div>
          </form>
          <div class="row login-btn">
            <div class="col-md-6 mb-2 mt-2">
              <a href="cards/index.php" class="header-font">Login</a>
            </div>
            <div class="col-md-6 mb-2 mt-2">
              <a href="cards/register.php" class="header-box">Register</a>
            </div>
          </div>
        </div>
      </div>
      <div class="collapse navbar-collapse mwc-orange-nav" id="navbarSupportedContent">     
        <div class="container">     
          <ul class="navbar-nav row px-4">
            <li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2 active">
               <a href="cards/list-new.php" class=" nav-link menu-header">
            One</a>
            </li>
            <li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
               <a href="cards/list.php?tn=beauty" class="nav-link menu-header">
            Two</a>
            </li>
            <li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
              <a href="cards/list.php?tn=health" class="nav-link menu-header">
            Three</a>
            </li>
            <li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
               <a href="cards/list.php?tn=wellness" class="nav-link menu-header">
            Four</a>
            </li>
             <li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
               <a href="cards/list-partners.php" class="nav-link menu-header">
            Five</a>
            </li>
            <li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
              <a href="articles" class="nav-link menu-header">
            Six</a>
            </li>
          </ul>
     </div>
    </div>
  </nav> 
</div><!-- end header-->

可折叠导航栏上的Bootstrap标头调整

zhuzhu224 回答：可折叠导航栏上的Bootstrap标头调整

大家都在问