Twitter Bootstrap的文本輸入呈現問題
[英]Text input rendering issue with Twitter Bootstrap
問題描述
我正在嘗試使用Twitter的bootstrap快速幾頁。 我在獲取文本字段時遇到問題，就像在http://twitter.github.com/bootstrap/上一樣
我的HTML看起來像
<div class="clearfix">
<label for="unit">unit</label>
<div class="input">
<input class="xlarge" id="unit" name="unit" type="text" value="" />
</div>
</div>
這似乎是我在演示頁面上看到的所有相關CSS類。 但是，我的文本輸入字段在輸入區域垂直方向上渲染太小，因此光標和文本與輸入區域的底部邊框重疊。 這是win7上最新的chrome。
8 個解決方案
解決方案1
58 已采納 2011-09-08 11:21:37
當錯誤地鍵入doctype時，也會觸發此行為。 就我而言， <!DOCTYPE> （錯誤）被修復為<!DOCTYPE HTML> ，問題就消失了。
解決方案2
9 2012-03-21 20:16:29
http://twitter.github.com/bootstrap/scaffolding.html
需要HTML5 doctype Bootstrap使用需要使用HTML5 doctype的HTML元素和CSS屬性。 請務必將其包含在項目中每個Bootstrapped頁面的開頭。
<!DOCTYPE html>
<html lang="en">
...
</html>
解決方案3
5 2011-08-25 20:27:06
當文檔在最外層缺少<html>標記時，會出現此行為。 在我的模板完成整理過程后，看起來應該是這樣。 謝謝記事本++。
解決方案4
2 2012-05-20 18:57:03
我有同樣的問題，但在我的情況下，這是由於文件之間的文本編碼不一致造成的。 一些文件以UTF-8編碼而沒有BOM（字節順序標記），而其他文件以UTF-8編碼，包括BOM。 我將所有文件切換為UTF-8而沒有BOM，它工作正常。
解決方案5
0 2013-09-09 14:43:00
將class="x-large"替換為： class="input-block-level"
解決方案6
0 2014-04-03 12:56:28
就我而言：
- 我在表單中輸入了文本
- 它在Firefox中有效，但在Chrome中無效
我通過覆蓋bootstrap css中的行高來修復此問題。 首先是這樣的：
line-height: inherit;
當我在我的css中更改它時（所以它覆蓋了bootstrap css）：
line-height: normal;
有效！
對於看到這個並且不知道我在說什么的人，請按f12並轉到您的文本框。
現在在樣式選項卡中，您將看到：
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
font-height: inherit;
}
那是你要覆蓋的那個。
解決方案7
0 2014-07-23 06:24:21
謝謝大家，這對我很有幫助。
我也面臨這個問題，幫助其他用戶分享我的旅程如何解決它。 問題看起來像這樣：
這個問題在Firefox中看起來很合適。
我如何找到解決方案：
- 我知道你認為這是css優化的問題。 或者它背后沒有合適的CSS。
- 我正在使用bootstrap，然后第二個想法是，沒有適當的類位置輸入框。
- 當我來到這個問題並開始閱讀答案時，他們提出
<!DOCTYPE html>我不相信，但我開始看那頁。 - 我也查看了Firefox中的View Source，但是存在
<!DOCTYPE html> - 突然間，我看到了firebug html，並且在其他所有頁面中都沒有DOCTYPE 。
現在我想為什么會發生這種情況，背后的原因。
然后我看看jsp頁面。 這是我的問題，有人在正文之前包含了另一個jsp頁面。
希望這個突出的幫助。
解決方案8
-1 2013-05-19 07:06:00
我的文件是在Windows中創建的，我遇到了類似的問題，即高度太小，因此下降器被截斷。 我的文件有一些PHP作為第一行后跟所需的html。 閱讀完所有評論之后，我將我的（2行）移到了PHP之前的頂部並且高度增加了......所以問題解決了。 似乎DOCTYPE必須在任何PHP之前就開始了。
如何在Twitter Bootstrap的彈出窗口中插入輸入文本？
[英]How do I insert input text in a popover from Twitter Bootstrap?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.