【发布时间】：2018-08-22 20:08:45
【问题描述】：
好的，所以有很多这样的问题，但是在尝试了其他类似问题的一些答案中的代码之后，我仍然卡住了！
我设法让 2 个 flex 行在一个 flex 列中工作，品牌形象垂直居中，但我在水平间距方面遇到了问题。
在导航栏的第一行，我有一个导航项目列表，还有一个带有搜索栏的内联表单。我希望搜索栏右对齐，而导航项保持左对齐。
我尝试在各种元素上使用 justify-content-between，但没有成功，我也尝试过 m*-auto 类，但我无法将导航项和搜索栏保持在同一行，而将它们水平分开！
这是我的代码
.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>【问题讨论】：
-
感谢您的所有回答。对不起，我不能全部接受！ :)
标签： css twitter-bootstrap flexbox bootstrap-4 navbar