Twitter Bootstrap水平表單內聯幫助文本問題

我正在製作一個帶有Twitter Bootstrap的表單，並且對齊「幫助聯機」元素有一個小小的問題。Twitter Bootstrap水平表單內聯幫助文本問題

下面是代碼：

<form class="form-horizontal" action="purchase.php" method="post" > 
    <fieldset> 

    <div class="control-group"> 
     <label class="control-label" for="date">Details</label> 
     <div class="controls controls-row"> 

      <input class="span2" type="text" id="date" data-date-format="dd/mm/yyyy" title="Enter Date in DD/MM/YYYY Format Only" placeholder="DD/MM/YYYY" value="<?php echo $dateToday;?>" required> 

      <input class="span2" type="text" name="resin" id="resin" title="Resin Name" placeholder="Resin Name" required/> 

      <input class="span2" type="text" name="kg" id="kg" title="Enter Quantity in 00.0 format only" placeholder="Enter Quantity" pattern="\d+(\.\d{1})?" required/> 

      <!-- Below is the problem in question--> 
      <span class="help-inline">Error Text Here.</span> 

     </div> 
    </div> 

    </fieldset> 
</form>

的截圖「錯誤文本這裏的」錯位出現：https://dl.dropbox.com/u/128104/Random/mia.png

任何想法如何解決這一問題？

來源

2012-09-18 Archit

雖然這是一個老問題，事情已經發生了變化，但我最近正在研究這個問題，並且直到今天爲止，放置在元素頂部的'class =「help-block」或'class =「help-inline」（也就是在DOM之前），或者任何形式元素完全不需要的東西。 – JSmyth

我認爲最快的修復方法是在問題的跨度上設置line-height CSS屬性。如果增加它，它應該向下移動一點，並更好地對齊文本框的中心。

如果您要將所有這些放在fiddle中，那麼StackOverflow的用戶將更容易爲您提供更好的解決方案，因爲他們可以更改代碼並查看行爲。

P.S.日期input字段缺失結束/。

來源

2012-09-18 11:30:31

Btw'''''''''''''''''''''''只要這個HTML5文檔應該是HTML5文檔，我猜這是因爲標籤內有'data-'屬性。沒有斜槓也是有效的HTML5 - 它只是一個[語法糖]（http://stackoverflow.com/a/3558200/588966） – JSmyth

是的，你是對的。這是自從xHTML以來我在最佳實踐中遺留下來的東西。 –

Twitter Bootstrap水平表單內聯幫助文本問題

回答

相關問題