引導輸入追加+谷歌地圖表格

我想要一個塊級別的輸入附加，其中輸入欄佔據除按鈕以外的所有空間。引導輸入追加+谷歌地圖表格

我得到這個工作與<button>或<span>，但一旦我將標籤切換到<input>，我開始再次有樣式問題。但是，<input>標籤是必需的。

2012-12-14 snakesNbronies

我把它做這個工作：

.input-append { 
    display: table; 
    width: 100%; 
} 
.add-on { 
    display: table-cell; 
    height: auto !important; 
} 
.input-bar { 
    display: table-cell; 
    width: 100%; 
    border-right-style: None; 
} 
.well{ 
    padding-right: 58px; 
}

我刪除了嵌套的選擇，你可以這樣做，在常規CSS。（儘管Sass和LESS你可以）。
我在「.add-on」選擇器上添加了「height：auto！important」。儘管使用「！important」通常被認爲不是最佳實踐。
我添加了填充 - 右邊的58px這是GO的寬度！按鈕，39px，加上19px的填充。

編輯：正如@nicefinly指出的那樣，GO！按鈕仍然關閉。在Chrome中，我沒有看到任何錯誤，但在Firefox中，我可以確定地看到高度問題。因此，在所有的his changes中，我還會補充說，例如在修改well和add-on類時，這會改變所有使用這些標準Bootstrap類的地方，這可能不是您想要的。

相反，我會爲所有這些自定義類創建單獨的類，以便它們在此特定情況下以及在其他地方按預期方式工作。例如，「附加按鈕」，「很好用按鈕」等

來源

2012-12-14 03:04:29 CoderDave

這似乎修復的寬度，但高度是幾個像素關閉它似乎 - [見小提琴在這裏]（http://jsfiddle.net/thong/TrVXE/34/）但是...我應該感謝你，因爲這表明我朝着正確的方向前進。我爲未來的讀者寫下了自己的答案。 – snakesNbronies

只有我做的主要區別是高度靜態，而不是汽車。比較[JSFiddle of auto]（http://jsfiddle.net/thong/TrVXE/32/）和[靜態高度]（http://jsfiddle.net/thong/TrVXE/36/） – snakesNbronies

這也是有幫助的以防未來的讀者有與未輸入按鈕相同的問題或類似的問題。 http://stackoverflow.com/questions/12896782/twitter-bootstrap-block-level-form – snakesNbronies

@CoderDave指出我在他的建議正確的方向 - JSFiddle of @CoderDave's answer

不過，我則注意到高度有點偏離。相反，我手動設置按鈕高度 - JSFiddle of my workaround

.input-append { 
    display: table; 
    width: 100%; 
} 
.add-on { 
    display: table-cell; 
    height: 30px !important; 
} 
.input-bar { 
    display: table-cell; 
    width: 100%; 
    border-right-style: None; 
} 
.well{ 
    padding-right: 58px; 
}

但隨後...

測試在Chrome中給了我奇怪的結果（不一定在小提琴，但在我的本地環境）。因此，而不是填充，我用了margin-left和margin-right其中

在input .add-on

和

在.input-bar

但是...之後margin-right = -55px，我注意到，margin-left = 17px z-index導致.input-bar阻止GO！按鈕時，當酒吧焦點（即我點擊它）。

因此，我設置z-index

z-index: -1爲well z-index: 1爲.input-bar z-index: 2爲.add-on

FINAL JSFIDDLE HERE!

這似乎是一個非常哈克解決方案。如果有人有更好的解決方案，請分享。

來源

2012-12-14 08:52:07 snakesNbronies

另一個更新--Z-索引在這之後似乎需要調整。 – snakesNbronies

引導輸入追加+谷歌地圖表格

回答

相關問題