在 twitter bootstrap 3 中,我想在导航栏中添加一个按钮组,但它似乎会破坏导航栏,因为它会创建换行符:
<li>
<form class="navbar-form form-inline" >
<div class="input-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</span>
</div>
</form>
</li>
如何避免导航栏中的换行符?
最佳答案
也许您不需要将表单放入列表项中:
<!-- Start Of Example -->
<form class="navbar-form form-inline">
<div class="input-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</span>
</div>
</form>
<!-- End Of Example -->
更新:另一种方法(您也可以使用 navbar-right 将 ul block 右对齐)
<!-- Start Of Example -->
<ul class="nav navbar-nav">
<li>
<div class="navbar-form form-inline" role="form">
<div class="form-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
</div>
<div class="form-group">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</div>
</div>
</li>
<li>
<li><a href="#">Action</a></li>
</li>
</ul>
<!-- End Of Example -->
关于html - Bootstrap 3 : Add Buttongroup to navbar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18830194/