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.