我是新手引導,並一直試圖把基本的導航欄放在一起。我遇到的問題是如何將元素保留在一起而不使用表單元素。隨着bootstrap如何保持導航項目組在一起
搜索按鈕搜索輸入元素浮動如圖所示的jsfiddle here
我預期的結果是有兩個輸入和按鍵並列,如下圖所示,但同時保持從其他菜單項的距離:
什麼是引導配置(或類)來實現這種效果?
我的HTML是:
<nav class="navbar navbar-default" style="margin-top:3px">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="width:50px; padding-top:4px; padding-bottom:4px">
<span>Brand</span>
<!--<img src="content/images/MaxForms_2.png" />-->
</div>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Action <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li>
<ul class="">
<li>
<input type="text" class="form-control" placeholder="Search item">
<button type="submit" class="btn btn-default">Search</button>
</li>
</ul>
</li>
<li class="input-lg">
<button type="button" class="btn btn-default" data-bind="click: $root.saveForm, event:{blur: $root.removeStatus}">
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Submit Form
</button>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
@YHHao你爲什麼要將標籤更改爲twitter-bootstrap?我的理解是,Bootstrap(www.getBootrap.com)和twitter-bootstrap是不一樣的。事實上,當您從標籤列表中選擇bootstrap時,它會顯示「不要與twitter-bootstrap混淆...」 – user1309226
再次閱讀標籤信息。 http://getbootstrap.com/是關於[Twitter Bootstrap框架](https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework))。另一個標籤** bootstrap **是關於[Bootstrapping](https://en.wikipedia.org/wiki/Bootstrapping)。 –