具有2行和内联表单的Bootstrap 4导航栏

Question

好的，所以有很多这样的问题，但是在对其他类似问题给出的一些答案中的代码进行了实验之后，我仍然很困惑！

我设法在flex列中工作了2个flex行，品牌形象垂直居中，但是水平间距出现问题。

在导航栏的第一行，我有一个导航项列表以及一个带有搜索栏的嵌入式表单。我希望搜索栏右对齐，而导航项保持左对齐。

我试过在各种元素上使用justify-content-between，但是没有运气，我也试过了m * -auto类，但是在水平分隔它们的同时，我不能将nav-items和搜索栏保持在同一行！

这是我的代码

.navbar {
  padding-top: 0;
  padding-bottom: 0;
  /*  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.03);  */
  font-weight: 300;
}

.navbar-dark {
  background: linear-gradient(to right, rgba(0, 45, 165, 0.97), rgba(10, 88, 157, 0.97), rgba(10, 88, 157, 0.97), rgba(0, 45, 165, 0.97));
}

.navbar-brand {
  margin-right: 20px;
}

.nav-item {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 80%;
  padding: 0 .4rem;
}

.navbar .navbar-nav .nav-link {
  transition: all .05s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link.active {
  border-bottom: 1px solid white;
}

.navbar-dark .navbar-nav .nav-link:hover {
  border-bottom: 1px solid white;
}

.navbar-toggler:hover {
  cursor: pointer;
}

#search-bar {
  background-color: #5c87af;
  color: white;
  font-size: 14px;
  width: 200px;
  height: 30px;
  transition: all .2s;
  border: none;
}

#search-bar:hover {
  background-color: #779ec1;
}

#search-bar:focus {
  background-color: white;
  color: #212529;
  width: 400px;
}

#search-bar::-webkit-input-placeholder {
  color: white !important;
}

#search-bar:-moz-placeholder {
  /* Firefox 18- */
  color: white !important;
}

#search-bar::-moz-placeholder {
  /* Firefox 19+ */
  color: white !important;
}

#search-bar:-ms-input-placeholder {
  color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-dark navbar-expand-sm">
  <a class="navbar-brand" href="#">
    <img src="/images/MW-logo-white.png" height=28 class="" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse flex-column align-items-start" id="navbar">
    <ul class="navbar-nav nav my-1">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
      </li>
      <form class="form-inline">
        <input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
      </form>
    </ul>
    <ul class="navbar-nav nav my-1">
      <li class="nav-item">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

只要确保两者navbar-nav都是全宽即可。您可以用于w-100此...

https://www.codeply.com/go/DGmjwI79yy

<nav class="navbar fixed-top navbar-dark navbar-expand-sm">
  <a class="navbar-brand" href="#">
    <img src="//placehold.it/100x30" height=28 class="" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse flex-column" id="navbar">
    <ul class="navbar-nav nav my-1 w-100">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
      </li>
      <form class="form-inline ml-auto">
        <input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
      </form>
    </ul>
    <ul class="navbar-nav nav my-1 w-100">
      <li class="nav-item">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </li>
    </ul>
  </div>
</nav>

然后它将ml-auto按预期工作以将表单推向正确的位置。

相关问题：
Bootstrap 4 导航栏有 2 行