我想制作一个 inline form对于移动视口(viewport),搜索按钮将位于输入框旁边。但是文件说
This only applies to forms within viewports that are at least 768px wide.
如何在不使用内联表单的情况下实现此结果?
手机屏幕
导航栏标题
这是 navbar-header 片段:(在表单中添加 .form-inline
不会像文档中提到的那样使其内联)
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<!-- icon-bar span omitted -->
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="clearfix"></div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
请您参考如下方法:
在搜索了一些 Bootstrap 组件之后,我可以通过将表单视为 input group 来实现我想要的。而不是作为一个表单组。
这是我的新导航栏标题的片段
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<!-- omitted icon-bar span -->
</button>
<div class="clearfix"></div>
<div class="container">
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">Submit</button>
</span>
</div>
</form>
</div>
</div>