Question

在我的网站上，我使用的是自举箱，但是线路高度似乎已经缩小了，我不能为我的生活找出原因。

我没有修改任何bootstrap CSS，只有我自己的CSS，但我不相信这会干扰。

我使用的代码是：

<div class="pull-left">
<h3>Search for devices</h3>
<p>Use the search form below to search for your device.</p>
<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">Search</button>
</div>
</div>

此处的实例：http://dev.romwars.com/#

有人有任何建议吗？

Answer 1

我的浏览器（Chrome）正在您的输入中应用规则box-sizing: border-box。要解决您的问题，您应该在CSS中输入：

input[type="text"] {
  box-sizing: content-box;
}

此外，您的问题似乎就是在这个问题中描述的问题：What causes the “user agent stylesheet” to use “border-box” instead of “content-box” for box-sizing?。您可以解决将<!DOCTYPE html>放在文档上方的问题。

Answer 2

浏览器处于怪异模式，因为您没有指定页面的doctype。

Bootstrap输入框高度缩小

2 个答案: