Question

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

在其中三个中，我面临着一个我没有理解的奇怪问题。

我有以下HTML代码：

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

渲染没问题但是当我在字段中输入内容时，没有任何内容出现。进一步调查，我发现input-prepend / append将font-size设置为0，然后文本似乎消失了。

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

提前致谢

Answer 1

我也注意到了这个问题，并且能够找到原因。

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

注意：这不再是Bootstrap 3中的一个问题，因为新的.input-group样式依赖于浮点数而不是之前的内联块方法（使用空白黑客）。

Answer 2

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

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

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