CSS框大小弄乱表单高度

Question

我刚刚上传了这个问题,但它最终给了我的风滚草徽章,所以我再试一次.

我现在正在阅读迈克尔·哈特尔的铁路教程,我遇到了一个问题,即盒子大小的属性干扰了表格高度,如下图所示.

@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  @include box_sizing; <--- this line here is causing issues
}

(有效的盒子大小属性)

(box-sizing属性无效)

注意当box-sizing属性生效时,有多少小形式？您无法真正查看完整的字母,因为高度太低.我试图在输入,textarea,..等下更改height属性.但好像我的代码被Bootstrap覆盖了.如果你有任何想法如何使形式更大(更高的高度)我会非常感激.

Answer 1

box-sizing: border-box 改变盒子模型，所以填充从高度中取出，而不是添加到它。

所以这个块：

div {
  box-sizing: content-box; // default
  height: 2em;
  padding: .25em;
}

会2.5em很高，这个块：

div {
  box-sizing: border-box;
  height: 2em;
  padding: .25em;
}

将是2em高的，.5em间隔为填充分隔。

另一个问题是 bootstrap 如何定义输入的高度：

input[type="text"], ...other selectors..,
.uneditable-input {
  display: inline-block;
  height: 20px;
  ...
}

定义高度不起作用的原因是因为input[type="text"]它比 更具体input，因此引导程序声明覆盖了您的声明。

要解决您在输入时遇到的问题，请定义高度并使用更具体的选择器：

input[type="text"], textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  height: 2em;
  margin-bottom: 15px;
  @include box_sizing;
}

演示