使用Twitter Bootstrap在輸入文本框右側放置並修復圖標

我剛開始使用Twitter Bootstrap（我剛剛開始使用它，所以我還沒有完全掌握它），我正在嘗試創建具有一些特定視覺元素的兩列形式。使用Twitter Bootstrap在輸入文本框右側放置並修復圖標

窗體的完整寬度約爲。視口寬度的80％，在這裏是標籤和相關文本框的兩列（大致等距）。某些文本框需要在文本框的右側貼上一個小圖標，並在用戶調整瀏覽器窗口大小時將該圖標固定在文本框的右手邊（至少保持這種狀態降至1024x768分辨率）。我也試圖用「響應式設計」來實現所有這些。

我可以讓它看起來更好的分辨率，但我知道我做錯了，因爲當用戶調整瀏覽器窗口時，圖標顯示在文本框「內部」。

這第一張圖片展示的形式應該是什麼樣子（大約）所有尺寸：

More or less correct alignment of visual elements on the form

但調整瀏覽器窗口時，它這樣做： Envelope icon moves inside the textbox when browser window is resized

我想該小信封圖標始終固定在文本框的右側。不幸的是，當收縮甚至進一步的瀏覽器窗口，它移動到下一行： Envelope icon moves to next line when browser window is resized even smaller

我使用ASP.NET MVC帶來太多的這種形式，所以有很多的@Html.TextBoxFor呼叫標誌內事-up，但是，我已經張貼了的jsfiddle與突出問題的相關渲染加價的部分：

http://jsfiddle.net/qYTSY/1/

我敢肯定，我已經採取了完全錯誤的做法與此，但我不是設計師，所以我正在努力調整目前的加價來實現我所追求的目標。任何人都可以幫忙嗎？

來源

2012-10-23 CraigTP

你有沒有試過[預先和附加輸入]（http://twitter.github.com/bootstrap/base-css.html#forms）？ – Sherbrow

@Sherbrow - 我以前試過這個，沒有太多的運氣，但是，我最近也嘗試過與此相結合的其他事情，我想我就在那裏。請參閱下面的答案。謝謝你的幫助！ – CraigTP

在的jsfiddle我添加了一個類：

.controls-row-with-icon { 
    width: 28em; 
}

...然後發生明顯變化的兩個div到：

<div class="controls controls-row controls-row-with-icon">

即「銷」的郵件圖標只是在右邊。不知道它是否會「破壞」其他任何東西？

注意：在jsfiddle中，兩列似乎相互重疊 - 不知道它是否會在生產版本中這樣做？當視口較小時，我無法讓rh列「落入」lh列 - 但是猜測在您的生產代碼中工作正常？

羅布

編輯

見註釋

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 

} 

.row{ 
    /*min-width: 62em;*/ /* add this is viewport should be fixed */ 
} 

.controls-row{ 
    width: 30em; 
    background: #ccc; 
} 

.row-fluid .span5{ 

    margin-left: 0; 
    margin-right: 2em; 
    width: 30em; 
} 

.row-fluid .offset1{ 
    margin-left:0; 
    margin-right: 0; 
}

來源

2012-10-23 10:42:46 LiverpoolsNumber9

另外 - 請注意，您使用％age的寬度 - 這很好。但除非標籤和文本框的大小也是流動的（包括字體大小和圖像大小），否則您需要一些固定的寬度以避免這些重疊問題。 – LiverpoolsNumber9

好的 - 我將如何從頭開始做的一個例子... http://jsfiddle.net/ntMNv/6/ – LiverpoolsNumber9

好吧 - 從原來的js小提琴 - 現在使用一些固定的寬度等有一個更固定的，但如果視口太小，還會流動浮動2列 - 根據需要調整寬度等。它主要是覆蓋em的（參見編輯回答）中的年齡寬度， – LiverpoolsNumber9

嗯，有些擺弄身邊後，我相信我已經找到了解決辦法！

這裏是一個更新的jsfiddle：

http://jsfiddle.net/qYTSY/32/

這凸顯了答案（忽略第一列 - 我分開固定的這件事。）

非常感謝這兩個LiverpoolsNumber9和Sherbrow爲他們幫助我指導我尋求解決方案。

我的解決方案的關鍵是去除周圍需要追加到它們的圖標（離開這個span到位造成的種種神祕和奇妙的問題），輸入元素span元素的span3類，但隨後也包裹輸入元素和圖標元素放在一個額外的div中，並使用input-append和add-on類來確保將圖標放置並固定在輸入框的右側。

所以這個加價：

<div class="controls controls-row"> 
    <span class="span3"><label for="Contact_EMail">EMail</label></span> 
    <span class="span3"><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span> 
    <span class="offset4"><a href="mailto:[email protected]" id="emaillink"><i class="icon-envelope" id="emailicon"></i></a></span> 
</div>

成爲本：

<div class="controls controls-row"> 
    <span class="span3"><label for="Contact_EMail">EMail</label></span> 
    <div class="input-append"> 
     <span><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span> 
     <span class="add-on"><a href="mailto:[email protected]" id="emaillink"><i class="icon-envelope" id="emailicon"></i></a></span> 
    </div> 
</div>

雖然我已經找到了解決辦法，我不得不承認的是，這裏的CSS /樣式/ Twitter的引導來講，我仍然覺得lot like this！

來源

2012-10-24 08:34:24 CraigTP

使用Twitter Bootstrap在輸入文本框右側放置並修復圖標

回答

相關問題