bootstrap 2 input-append add-on

我正在使用bootstrap input-append add-on將圖標添加到輸入字段的末尾。這一切都很好。問題是在輸入上設置100％的寬度，將附加範圍標記壓入父代「input-wrapper」div可視區域之外。我正在使用box-sizing：border-box;在所有輸入字段上。我似乎可以做這項工作的唯一方法是設置父div「input-wrapper」以顯示：flex;不幸的是，這不是一個選項，因爲它在IE8或9中不受支持。我還有哪些其他選項。bootstrap 2 input-append add-on

http://jsfiddle.net/chapster11/zjx2zc6e/

示例代碼。

 <div id="form-elements"> 
     <div class="input-wrapper input-append"> 
      <input id="paymentDate" class='paymentDate' type="text" /> 
      <span class="add-on"><i class="icon-th"></i></span> 
     </div> 
    </div>

CSS代碼

#form-elements{ 
     margin: 20px; 
    } 

    input[type]{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    max-height: 30px; 
    } 

    #paymentDate{ 
    height: 30px; 
    width: 100%; 
    } 

    .input-wrapper{ 
     width: 600px; 
     border: 1px dashed red; 
    }

來源

2015-05-28 me-me

添加了一個Jsfiddle網址，顯示span標記在父divs寬度和邊界邊界外被搗毀的問題。 –

v2.1.0 ?!你至少應該升級到v2.3.2。 – cvrebert

編輯：我的壞，在Bootstrap2上有一個與輸入塊（它適用於所有其他輸入）一起工作的「輸入塊級」功能的問題。有幾個人提出了一些解決方法，主要是使用表格顯示。你可以在這裏看到： https://jsfiddle.net/BMironov/BVmUL/

下面是處理它的CSS - 你可能想玩弄附加跨度的工作方式。

.input-append.input-block-level { 
    display: table; 
} 
.input-append.input-block-level .add-on { 
    display: table-cell; 
    width: 16px; 
} 
.input-append.input-block-level > input { 
    box-sizing: border-box; 
    display: table; 
    min-height: inherit; 
    width: 100%; 
} 

.input-append.input-block-level > input { 
    border-right: 0; 
}

而不是將輸入設置爲100％寬度，將類input-block-level添加到文本輸入。您不應該需要任何額外的CSS，該功能內置到引導程序2中。

來源

2015-05-28 17:49:19 Jack

我將輸入塊級別添加到輸入標籤，但沒有解決問題。看到文章中的jsfiddle鏈接來測試它。 –

我修正了它 - 我完全忘記了輸入塊級需要手動修復的插件存在問題。輸入塊級別與其他一切工作！ – Jack

很明顯，如果你的嵌套元素input的一個設置有寬度爲100％，你的其他嵌套元素span將得到的包裝外，其總寬度被佔用由input。

來源

2015-05-28 17:45:36 user2755140

是的，很明顯，這就是爲什麼我的問題要求解決這個問題。 –

沒有問題。這是預期的行爲。如果你想包裝2個元素，其中一個不應該包裝100％的可用區域。 – user2755140

bootstrap 2 input-append add-on

回答

相關問題