Bootstrap 4导航栏，有2行和内联形式

Question

好的，所以有很多这样的问题，但在对其他类似问题的一些答案中试验过代码之后，我仍然卡住了！

我设法在柔性列中使用2个弹性行，品牌图像垂直居中，但我的水平间距有问题。

在导航栏的第一行，我有一个导航项列表，还有一个带搜索栏的内联表单。我希望搜索栏右对齐，而导航项保持左对齐。

我尝试在各种元素之间使用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 navbar with 2 rows

Answer 2

只需两个class即可实现此布局。

  

1 - 在w-100

添加<ul class="navbar-nav nav my-1">      

2 - 在ml-auto

添加<form class="form-inline">

以下是工作演示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需将1. Clone Project in to local directory 2. Use that directory in the command line execution 用于您的搜索栏类。

基本上，Ml属于自动保证金 可以应用于单个弹性项目的另一件事是边距。可以使用以下保证金类别：

mr-auto：在项目的右侧添加边距

ml-auto：在项目左侧添加边距

mt-auto：在项目顶部添加边距

mb-auto：在项目底部添加边距

这是您的代码段

＆＃13;

＆＃13;

ml-auto

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;