Twitter的引导表单字段太小(Twitter bootstrap form fields too

2019-09-16 16:41发布

我知道这个话题“听起来”像很多其他人都在那里,但我已经通过所有现有的线程看(以及“最”反正),我仍然有一个问题,我可以在使用帮助...

这个问题是不是太不相似别人怎么描述:

  • 某些表单元素不显示其全部垂直高度
  • 最引人注目的在这些是坐着的时候旁边的一个按钮或“附加”级输入类型看起来有点贫血大小
  • 最近我注意到一个更严重的问题......单选按钮变为“单选点”,因为他们是如此之小,他们几乎不可见。

现在的人很多通过确保他们正确指定DOCTYPE在他们的HTML文件的顶端解决他们的问题。 我也发现,这个简单的调整做了我的静态HTML实体模型的伎俩。 可悲的是,当我切换到WordPress的问题又出现了,但我很肯定将在输出的最顶端的HTML 5 DOCTYPE签名(我用“查看源文件”选中此几次,我想也许我失去了我的心神)。

我已经包括了屏幕的情况下,这有助于阐明这个任何光线的快照。 你可以在这里找到: http://www.flickr.com/photos/14261777@N00/6957941282/ 。 注意在那个应该是单选按钮下方的小小的圆点。 更明显的是输入字段都不够高。 哦,还有的完整性,这里是我的HTML源代码怎么开始的截图: http://www.flickr.com/photos/14261777@N00/6957952802/ 。

我喜欢任何人谁拥有这可能是为什么发生的理论和可能存在的(即使该解决方案的来源不详)的任何变通办法听到。 我试图强加CSS属性,例如行高,高度,最小高度等,以及其他一些与零的效果。

Answer 1:

它看起来像你有两个问题。 的input type=text问题和radio按钮的问题。 没有看到你的代码,它看起来好像你的文本框问题与DOCTYPE和你的单选按钮的问题与覆盖CSS样式(如果你张贴检查输出单选按钮可以证实)。

如果您的变量表示作为正确的值(如18像素高度),这是的话,这是最绝对是一个DOCTYPE问题。

从这篇文章的列表除了:

你已经做了所有正确的东西,但你的网站不看或工作,因为它应该在最新的浏览器。

你已经写了有效的XHTML和CSS。 你已经使用了W3C标准的文档对象模型(DOM)来处理动态页面元素。 然而,在设计用于支持这些非常标准的浏览器,你的网站是失败的。 有故障的DOCTYPE可能难辞其咎。

这个小文章会为您提供与工作文档类型,并解释这些看似抽象的标签的实际,现实世界的影响。

这里的文档类型为每W3C的推荐列表:

http://www.w3.org/QA/2002/04/valid-dtd-list.html



Answer 2:

如果任何人的兴趣,这是我添加了什么来解决这个问题:

input, input[type="text"], input[type="radio"], isindex, .uneditable-input {
    padding: 4px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCC;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #CCC; 
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #CCC;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.input-append .add-on, .input-append .btn {
    margin-left: -6px;
}

input[type=checkbox] {
        -webkit-appearance: checkbox;
}


文章来源: Twitter bootstrap form fields too small