2012-08-09 38 views
3

使用缺省的/垂直的形式,在bootstrap documentation表明提交按鈕位於各種輸入下面但這不是in my form.Twitter的引導提交按鈕放置行爲不

當瀏覽器有一個大的可視空間,它所在的情況下,在最後一個輸入字段旁邊並且不在一行。如果您將瀏覽器調整爲手機或平板電腦的寬度,則響應會接管並正確顯示。

更改包裝DIV從.span12.span3按下按鈕下來,但它似乎是一個hackish的修復,因爲加入.span3的輸入和按鍵,使其大小均勻yields the button pushed off to the side.

我失去了一些標記,或者是Bootstrap有問題嗎?在他們的文檔中,按鈕前面是一個複選框標籤,並且有一些幫助文本包裹在p中 - 因此可能會影響其樣式以使其看起來正確。

+0

爲了讓按鈕正確放置在輸入框旁邊,我認爲你必須在窗體中添加'form-inline'類。現在,你必須將盒子放在彼此的頂部,而且我不太確定你可以使用默認的bootstrap.css – Marcus 2012-08-09 14:35:55

+0

這兩種方式。我期待提交按鈕在最後一個輸入框下方。感謝那些信息。 – anjunatl 2012-08-09 14:38:22

+0

哦,對不起 - 我以爲你想要的按鈕,因爲它 - 但與文本框垂直對齊。檢查我的答案=) – Marcus 2012-08-09 14:46:28

回答

6

您必須將您的提交按鈕放入類controls的div中。

button on div.controls

如果檢查引導文檔頁面上的來源,他們甚至把所有的投入和按鈕control-group S和controls

+0

太棒了。 'control-group'的時髦之處在於它有很大的餘量 - 我認爲它只是用在'.form-horizo​​ntal'中。 – anjunatl 2012-08-09 14:49:30

+0

可能... Twitter Bootstrap要求你按照自己的意願去做,猜測這就是爲什麼它被稱爲框架=) – Marcus 2012-08-09 14:50:55

+0

是的。它的細微差別有時會讓人感到沮喪。說起來,我剛剛意識到爲什麼按鈕放置在您指定了一個跨度之後[在現在已修補的解決方案示例中](http://anjunatl.com/stack/bootstrap-submit-button-fixed- spans.html)...又一個細微差別 - 響應式在更大的顯示器上爲任何跨度增加了餘量。的Bleh。 – anjunatl 2012-08-09 14:58:17