带引导程序的 td 中的全高输入答案

【问题标题】：Full height input in td with bootstrap带引导程序的 td 中的全高输入
【发布时间】：2014-11-19 19:30:13
【问题描述】：

见http://jsbin.com/sawofo/2/edit。我正在尝试使用引导程序的 css 用输入填充表格单元格，但我留下了一个我无法摆脱的空白。

我的 html sn-p 是：

<table class="table table-bordered">
  <tbody>
    <tr>
      <td class="with-input"><input class="form-control tall" type="text" value="text"></td>
      <td class="tall">XX</td>
    </tr>
  </tbody>
</table>

允许输入拉伸的 CSS 是：

td {
  padding: 0px !important;
}

td.tall {
  height: 100px;
}

input.tall {
  margin: 0;
  height: 100% !important;
  display: inline-block;
  width: 100%;
}

但是在输入的底部仍然有一个我无法摆脱的差距。它似乎与引导设置有关

* {
    box-sizing: border-box;
}

但我不知道如何在不完全删除引导程序的情况下反转效果。如果我将td 设置为使用content-box，高度很好，但它会水平溢出到下一个单元格。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

添加padding: 0;

td {
  padding: 0px !important;
}

td.tall {
  height: 100px;
  padding: 0;
}

input.tall {
  margin: 0;
  height: 100%;
  display: inline-block;
  width: 100%;
  padding: 0;//added
}

输出

http://jsbin.com/kefibozapo/1/

【讨论】：

底部还有一个空隙，虽然小了很多。但最大的问题是我实际上在input 内填充。
在我的示例中，我使用固定高度来说明问题。在我的实际实现中，高度因其他内容而改变，所以我不能将input 的最小高度硬编码为td 的高度。

【解决方案2】：

我找到了解决方案。似乎由于某种原因，填充从子元素泄漏到td，因此在input 上设置padding: 10px 也将其分配给td。解决方案是将输入包装在 div 中，其样式为：

padding: 0;
display: inline-block;
height: 100%;
width: 100%;

例如：http://jsbin.com/sawofo/4/edit

【讨论】：