twitter-bootstrap - 与 input-prepend/append 结合使用时，字体大小为 0 的输入

Question

我正在尝试在 Rails 应用程序中使用引导程序，并且我已经尝试直接包含引导程序 CSS 或使用 bootstrap-sass/anjlab-boostrap-rails。

在他们三个中，我面临着一个我不理解的奇怪问题。

我有以下html代码：

<div class="input-append">
  <input type="text" /><a href="#" class="btn">?</a>
</div>

渲染没问题，但是当我在现场打字时，什么都没有出现。进一步调查，我发现 input-prepend/append 将字体大小设置为 0，然后文本似乎消失了。

我在编写 HTML 代码时是否忘记了什么？这是对的吗？

提前致谢

score 3 · Accepted Answer

我刚刚也注意到了这个问题，并能够追查原因。

Bootstrap（版本 2）的 css 规则.input-append并将.input-prepend字体大小设置为 0 以消除水平空白。然后将几个元素重置为正确的字体大小，但.btn不包括在重置中。通过添加.btn到获得恢复字体大小的元素列表中，我能够解决这个问题。

注意：这在 Bootstrap 3 中不再是问题，因为新.input-group样式依赖于浮动而不是以前的内联块方法（使用空白 hack）。

score 0 · Accepted Answer

最后，我发现了这个问题。我没有意识到我有另一个样式表与我的这部分代码冲突。冲突中隐含的代码如下：

input, textarea {
  font-size: 1.1em !important;
}

当我评论这个风格声明时，它再次像魅力一样起作用。我不明白为什么这会导致我有一些奇怪的行为。就我而言，这个定义是在包含 bootstrap.css 之后出现的。

2 回答 2