[英]Bootstrap input with button in navbar
I'm trying to make a search bar in Bootstrap, but I want it to be attached to the navbar.我正在尝试在 Bootstrap 中创建一个搜索栏,但我希望它附加到导航栏。 Here is what I currently have .
这是我目前拥有的。 The code for that:
代码:
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search" />
</div>
</form>
That works perfectly fine.这工作得很好。 But what if I add a button to it:
但是如果我给它添加一个按钮呢:
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search" />
<div class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-search" type="submit"></button>
</div>
</div>
</form>
This is what happens , it gets all messed up instead of being on 1 line.这就是发生的事情,它变得一团糟而不是在 1 行上。 Why is this happening and how do I fix it?
为什么会发生这种情况,我该如何解决?
All code for the navbar:导航栏的所有代码:
<nav class="navbar navbar-inverse" id="topnav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/home">Home</a></li>
<li><a href="/forum">Forum</a></li>
<li><a href="/about">About This Site</a></li>
<li class="navbar-left"><form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search" />
<div class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-search" type="submit"></button>
</div>
</div>
</form></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> User Settings</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</div>
</nav>
There is no input-group-btn
class in Bootstrap 4. Use an input-group as explained here Bootstrap 4 中没有
input-group-btn
类。 使用这里解释的输入组
<div class="input-group">
<input type="text" class="form-control" id="search" placeholder="Search" />
<div class="input-group-append">
<button class="btn btn-outline-secondary fa fa-search" type="submit"></button>
</div>
</div>
https://www.codeply.com/go/B1f1zG4RWQ https://www.codeply.com/go/B1f1zG4RWQ
Also, there is no btn-default
or navbar-form
in Bootstrap 4. Refer to the docs to make sure you're using the correct markup and classes.此外,Bootstrap 4 中没有
btn-default
或navbar-form
。请参阅文档以确保您使用正确的标记和类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.