[英]How to add toggle full width search box to the Navbar in Bootstrap 4?
I am using Bootstrap 4, and i am trying to place a search box which toggles to full width when the icon is clicked. 我正在使用Bootstrap 4,并且我试图放置一个搜索框,当单击该图标时,该搜索框将切换为全宽。
In Bootstrap 3, it was done like this example: https://bootsnipp.com/snippets/featured/simple-navbar-search 在Bootstrap 3中,操作类似于以下示例: https : //bootsnipp.com/snippets/featured/simple-navbar-search
But I am not sure how to achieve the same in Bootstrap 4 as so much has changed in bootstrap 4. 但是我不确定如何在Bootstrap 4中实现相同的功能,因为Bootstrap 4发生了很大变化。
How do i modify the above example? 我如何修改以上示例?
Change the Navbar as needed for Bootstrap 4. Notice the structure has changed. 根据Bootstrap 4的需要更改Navbar。请注意结构已更改。 It now uses flexbox, the
input-group
classes, nav-item
, etc.. are all different... 现在它使用flexbox,
input-group
类, nav-item
等都不同...
I used this tool to convert the Navbar structure from 3 to 4. Then adjust the input-group
classes... 我使用此工具将Navbar结构从3转换为4。然后调整
input-group
类。
<nav class="navbar navbar-light bg-light fixed-top navbar-expand-sm" role="navigation">
<div class="container">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> ☰
</button> <a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active nav-item"><a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item"><a href="#" class="nav-link">Link</a>
</li>
<li class="dropdown nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">Action</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a href="#" class="nav-link">Link</a>
</li>
<li class="dropdown nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">Action</a>
</li>
<li class="dropdown-item"><a href="#">Another action</a>
</li>
<li class="dropdown-item"><a href="#">Something else here</a>
</li>
<li class="divider dropdown-item"></li>
<li class="dropdown-item"><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button type="reset" class="btn btn-secondary">
<span class="fa fa-remove">
<span class="sr-only">Close</span>
</span>
</button>
</div>
<div class="input-group-append">
<button type="submit" class="btn btn-secondary">
<span class="fa fa-search">
<span class="sr-only">Search</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</nav>
You'll also need to modify the CSS. 您还需要修改CSS。 The padding for the buttons, height, etc..
按钮的填充,高度等。
@media (min-width: 768px) {
.navbar-collapse {
padding-top: 0px !important;
padding-right: 38px !important;
}
.navbar-collapse form[role="search"] {
width: 38px;
}
.navbar-collapse form[role="search"] input {
font-size: 15pt;
opacity: 0;
display: none;
}
.navbar-collapse form[role="search"].active {
width: 100%;
}
.navbar-collapse form[role="search"].active button,
.navbar-collapse form[role="search"].active input {
display: table-cell;
opacity: 1;
}
}
https://www.codeply.com/go/mLnFOWZqVo https://www.codeply.com/go/mLnFOWZqVo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.