帶插件和幫助塊的Boostrap 3輸入

使用Bootstrap CSS 3.3.1，使用插件和幫助塊進行輸入時遇到了一些問題。帶插件和幫助塊的Boostrap 3輸入

測試在Firefox/Chrome瀏覽器。標記是否錯誤？我想「輸入組」 ......作爲類沒有成功

下面是標記：

<div class="form-group"> 
    <label for="title" class="control-label col-md-3">Titre de la page</label> 
    <div class="col-md-9 input-group"> 
     <div class="input-group-addon"> 
      @ 
     </div> 
     <input type="text" value="Value test" class="form-control input-xxlarge" id="title" name="title" size="46" /> 
      <span class="help-block">Help Lorem Ipsum</span> 
    </div> 
</div>

來源

2015-04-14 Vincent Decaux

就拿了' 「input-group」之外的「help-block」，因爲它不是它的一部分。你也應該避免混合'input-group'和'col- *' – DavidG

試試這樣說：

<div class="form-horizontal"> 
    <div class="form-group"> 
     <label for="title" class="control-label col-sm-3">Titre de la page</label> 
     <div class="col-sm-9"> 
      <div class="input-group"> 
       <span class="input-group-addon">@</span> 
       <input type="text" id="title" name="title" class="form-control" /> 
      </div> 
      <p class="help-block">Example block-level help text here.</p> 
     </div> 
    </div> 
</div>

見this updated fiddle

（拉伸預覽窗格看到列支持）

來源

2015-04-14 16:30:39 Ted

好吧，似乎這樣工作，謝謝你的小提琴。它只是需要一個新的div容器在DOM :(。 –

它很好，去與接受答案呃，但如果你仍然需要help-block裏面的input-group（我需要它來支持我的工作JavaScript顯示內聯錯誤）有一個解決方法，可以解決這個問題，並已跨瀏覽器支持。

.input-group .help-block{ 
    display: table-row; 
}

這裏是小提琴：https://jsfiddle.net/L4joxj90/2/ （這隻有我們不能使用輸入組附加在輸入域左側的限制）

來源

2016-06-06 07:49:17 Siddhant

謝謝你提供這個答案。在我自己的標記'help-block'在'input-group'裏面有多個模板，所以改變標記是單調乏味的。壓力。謝謝！ – Digitlimit

帶插件和幫助塊的Boostrap 3輸入

回答

相關問題