搜索表單在響應Twitter Bootstrap網站中分解

我正在使用Twitter Bootstrap創建響應網站。我很喜歡框架工作，一切正常，除了我在標題中的搜索表單。它的類型很大，並且擴展超過7個網格，並且當我使窗口小於ca 512 px時，提交按鈕突然在輸入區域下滑動，這不是很整齊。我正在使用「表單橫向」類，文檔建議我應該使用它。搜索表單在響應Twitter Bootstrap網站中分解

下面是表單部分的代碼。任何幫助非常感謝！

<div class="row"> 
<div class="span7"> 



<form class="form-horizontal" id="searchfield" action="search.php" method="get"> 

<input name="address" placeholder="Write something..." type="text" class="span7 search-query field"> 
<button type="submit" class="btn-primary">Search</button> 

</form> 


</div> 


<div class="span4"> 
<a href="form1.php"><button type="submit" class="btn btn-large btn-inverse span4">Skapa boende</button></a> 
</div> 

</div>

來源

2013-02-14 user1009453

不是100％確定，但是你應該不使用行流體類而不是隻使用行嗎？你也告訴搜索字段，它應該是span7，就像它的父類一樣，但是你也有一個輸入，那麼它們如何適合span7呢？ – 2013-02-14 16:30:04

bootstrap中的按鈕應該有'btn btn-primary'，而不是'btn-primary' – jeroenvisser101 2013-02-14 16:37:18

什麼引導響應所做的是它使網站的響應「到用戶的viewport。這意味着如果視口的寬度跳到給定點以下，則佈局會發生變化。響應表定義.span1-12不會再浮動，低於某個點。因此將一個放置在另一個之下。

如果您不希望發生這種情況，您必須：a。刪除響應表，或b。做一些瘋狂的醜陋的變通辦法。最後一個是你不應該做的。雖然，它可能會起作用，它突破功能的可能性非常大。

雖然，可能有值得一提的東西。有一個人（阿諾德丹尼爾斯）爲自舉創造了一些簡潔的延伸，包括他所謂的'desktop row'。這只是一排，但響應式更改始於平板電腦視口。這不是你想要的，但它表明你可以改變響應表。

來源

2013-02-14 16:52:52 jeroenvisser101

搜索表單在響應Twitter Bootstrap網站中分解

回答

相關問題