Bootstrap表没有填充/边距?

时间:2016-10-26 09:03:38

标签: html css twitter-bootstrap

我有这张桌子:

<table class="table table-bordered table-condensed col-md-12">
  <thead>
    <tr>
      <td>Input</td>
    </tr>
  </thead
  <tbody>
    <tr>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>

我使用Bootstrap作为我的框架,它看起来像这样:

enter image description here

如何拉伸输入宽度&amp;高度适合表格单元格?

我在输入时使用CSS:width: 100%
我在td:padding: 0; margin: 0;

上尝试过CSS

2 个答案:

答案 0 :(得分:11)

@Araz评论:

tr td{
  padding: 0 !important;
  margin: 0 !important;
}

答案 1 :(得分:1)

padding:0添加到td。将样式表放在bootstrap.css下方。所以!important不是必需的。如果您在内联中使用css,则需要!important.form-control类用于生成单元格的输入宽度100%

&#13;
&#13;
td{padding:0px !important}
.form-control{border-radius:0px !important;}
&#13;
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-condensed col-md-12">
  <thead>
    <tr>
      <td>Input</td>
    </tr>
  </thead
  <tbody>
    <tr>
      <td><input type="text" class="form-control" /></td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;