带有引导的td中的全高度输入 [英] Full height input in td with bootstrap

问题描述

请参阅 http://jsbin.com/sawofo/2/edit 。我试图用一个输入，使用引导的CSS填充表单元格，但我留下一个空白，我无法摆脱。

See http://jsbin.com/sawofo/2/edit. I am trying to fill a table cell with an input, using bootstrap's css, but I am left with a gap that I can't get rid of.

我的html代码段是：

My html snippet is:

<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是：

And the CSS which allows the input to stretch is:

td {
  padding: 0px !important;
}

td.tall {
  height: 100px;
}

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

但是输入底部还有一个缺口， t摆脱。它似乎与引导设置有关

But there is still a gap at the bottom of the input that I can't get rid of. It appears to have something to do with bootstrap setting

* {
    box-sizing: border-box;
}

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

but I can't figure out how to reverse the effect without completely removing bootstrap. If I set the td to use content-box, the height is fine but it overflows horizontally into the next cell.

推荐答案

我找到了解决方法。看来，由于某种原因，填充从子元素泄漏到 td ，因此在 padding：10px 输入也将其分配给 td 。解决方案是使用样式将输入包装在 div 中：

I found the solution. It seems that for some reason the padding leaks from the child element to the td, so setting padding: 10px on the input also assigns it to the td. The solution is to wrap the input in a div with style:

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

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

这篇关于带有引导的td中的全高度输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！