具有2行和内联表单的Bootstrap 4导航栏 [英] Bootstrap 4 navbar with 2 rows and inline form
问题描述
好的，所以有很多这样的问题，但是在对其他类似问题给出的一些答案中的代码进行了实验之后，我仍然陷入困境！
Ok so there are a number of questions like this but after having experimented with the code in some of the answers given to other similar questions, I'm still stuck!
我设法在flex列中工作了2个flex行，品牌形象垂直居中，但是水平间距遇到了问题.
I've managed to get 2 flex rows working in a flex column, with the brand image vertically centered, but I'm having trouble with the horizontal spacing.
在导航栏的第一行上，我有一个导航项列表以及一个带有搜索栏的嵌入式表单.我希望搜索栏右对齐，而导航项保持左对齐.
On the first row of my navbar I have a list of nav-items and also an inline form with a search bar. I want the search bar to be right aligned, while the nav-items stay left aligned.
我尝试在各种元素上使用justify-content-between，但是没有运气，我也尝试了m * -auto类，但是我不能将nav-items和搜索栏保持在同一行，而将它们水平分开！
I've tried using justify-content-between on various elements but with no luck and I've also tried m*-auto classes but I just can't keep the nav-items and search bar on the same row while separating them horizontally!
.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>
推荐答案
只需确保两个navbar-nav均为全角.您可以为此使用w-100 ...
Just make sure both navbar-nav are full width. You can use w-100 for this...
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将按预期工作以将表格向右推.
Then the ml-auto will work as expected to push the form right.
相关问题:
引导带有2行的4个导航栏
Related question:
Bootstrap 4 navbar with 2 rows
这篇关于具有2行和内联表单的Bootstrap 4导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
