2015-08-08 41 views
1

我是新手引導,並一直試圖把基本的導航欄放在一起。我遇到的問題是如何將元素保留在一起而不使用表單元素。隨着bootstrap如何保持導航項目組在一起

搜索按鈕搜索輸入元素浮動如圖所示的jsfiddle here

我預期的結果是有兩個輸入和按鍵並列,如下圖所示,但同時保持從其他菜單項的距離: enter image description 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> 
+0

@YHHao你爲什麼要將標籤更改爲twitter-bootstrap?我的理解是,Bootstrap(www.getBootrap.com)和twitter-bootstrap是不一樣的。事實上,當您從標籤列表中選擇bootstrap時,它會顯示「不要與twitter-bootstrap混淆...」 – user1309226

+0

再次閱讀標籤信息。 http://getbootstrap.com/是關於[Twitter Bootstrap框架](https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework))。另一個標籤** bootstrap **是關於[Bootstrapping](https://en.wikipedia.org/wiki/Bootstrapping)。 –

回答

2

我以爲你忘了檢查這個頁面。 http://getbootstrap.com/components/#navbar-default

但是,我在我的小提琴中創建新的條目,讓您遵循。

<nav class="navbar navbar-default" style="margin-top:3px;"> 
<div class="container-fluid"> 

    <!-- start your brand --> 
    <div class="navbar-header"> 
    <button type="button" class="hide"> <!-- alt icon for mobile here --> </button> 
    <div class="navbar-brand site-brand"> 
     <span>Brand Name</span> 
    </div> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <!-- start your menu --> 

    <ul class="nav navbar-nav navbar-left"> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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> 
    </ul> 

    <!-- start your form --> 
    <form class="navbar-form navbar-right" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     <button type="submit" class="btn btn-default">Another Submit</button> 
    </form> 
    </div> 

</div> 
</nav> 

JSFiddle Version JSFiddle Version 2

注:我確實添加了類的標誌部分,在那裏你可以申請或覆蓋您在這裏想要的風格...讓我知道,如果在這裏一切都清楚了。

+0

感謝您關於品牌類。但是,我仍然遇到問題:我無法使用

元素對輸入和按鈕元素進行分組,因爲這將用於SharePoint Web部件中。第二個問題是搜索/提交模塊對'另一個提交'按鈕是正確的。我們需要將搜索/提交塊作爲與其他項等距離的單個菜單項處理。 – user1309226

+0

我更新JS小提琴..請檢查,如果這是你在找什麼。 – iMarkDesigns

0

明白了:輸入/按鈕塊應該被定義爲:

<li> 
        <ul class="nav navbar-form" > 
         <li> 
          <input type="text" class="form-control" placeholder="Search item"> 
          <button type="submit" class="btn btn-default">Search</button> 
         </li> 
        </ul> 
       </li> 

最終的jsfiddle here

我很高興!

+0

啊好的..明白了。 :) – iMarkDesigns