6

我前段时间上传了这个问题，但它最终给了我风滚草徽章，所以我再试一次。

我现在正在浏览 Michael Hartl 的 railstutorial，我遇到了一个问题，即 box-sizing 属性会干扰表单高度，如下图所示。

@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 无效

（box-sizing 属性无效）


请注意，当 box-sizing 属性生效时，表单会变小多少？您无法真正查看完整的字母，因为高度太低了。我试图改变输入，textarea，..等下的高度属性。但似乎我的代码被 Bootstrap 覆盖了。如果您知道如何使表格更大（更高的高度），我将不胜感激。

4

1 回答 1

5

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;
}

演示

于 2013-02-05T00:11:26.253 回答