Twitter-Bootstrap - 在搜索字段下方顯示導航欄搜索按鈕

Question

Yikes。我嘗試了一切，但無法弄清楚這一點。很確定我錯過了一些明顯的東西。

我希望搜索按鈕出現在搜索字段的旁邊，但出於某種原因，它出現在它的下面。我錯過了什麼？

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-navbar"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">The Brand Goes Here</a> 
</div> 

<!-- toggled items --> 
<div class="collapse navbar-collapse main-navbar"> 
    <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> 
<!-- end toggled items --> 

Answer 1

我假設你的意思是說按鈕 「提交」。它目前在文本字段的div元素之外，所以它在新的一行。

試試這個：

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-navbar"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">The Brand Goes Here</a> 
</div> 

<!-- toggled items --> 
<div class="collapse navbar-collapse main-navbar"> 
    <form class="navbar-form navbar-left" role="search"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="search"> 
    <button type="submit" class="btn btn-default">submit</button> 
    </div> 

    </form> 
</div> 
<!-- end toggled items -->