组插件在引导表中占用太多空间(Group addon taking up too much space in bootstrap table)

当我将一个.group-addon到bootstrap .table一个元素上时，所有其他元素都没有足够的空间，并且group-addon输入占用太多空间。

<h2>Only one bully, group-addon</h2> <table class="table"> <tbody> <tr> <td> <div class="input-group"> <input id="cool" class="form-control"> </div> </td> <td> <div class="input-group"> <input id="cool" class="form-control"> <div class="input-group-addon">x</div> </div> </td> <td>pushed around...</td> <td>being bullied...</td> <td>by group addons...</td> </tr> </tbody> </table> <h2>Two bullying group-addons</h2> <table class="table"> <tbody> <tr> <td> <div class="input-group"> <div class="input-group-addon">x</div> <input id="cool" class="form-control"> </div> </td> <td> <div class="input-group"> <input id="cool" class="form-control"> <div class="input-group-addon">x</div> </div> </td> <td>pushed around...</td> <td>being bullied...</td> <td>by group addons...</td> </tr> </tbody> </table> <h2>No Bullies</h2> <table class="table"> <tbody> <tr> <td> <div class="input-group"> <input id="cool" class="form-control"> </div> </td> <td> <div class="input-group"> <input id="cool" class="form-control"> </div> </td> <td>pushed around...</td> <td>being bullied...</td> <td>by group addons...</td> </tr> </tbody> </table> <div class="alert alert-info">When there is no group-addon inside a table with class table, the spacing looks reasonable, but a single group-addon ruins it all</div>

http://jsfiddle.net/billymoon/ntm2q/

我应该如何在引导表中使用group-addons而不占用太多空间？

When I add a .group-addon to an element inside a bootstrap .table, all other elements are not given enough space, and the group-addon input takes up far too much room.

<h2>Only one bully, group-addon</h2> <table class="table"> <tbody> <tr> <td> <div class="input-group"> <input id="cool" class="form-control"> </div> </td> <td> <div class="input-group"> <input id="cool" class="form-control"> <div class="input-group-addon">x</div> </div> </td> <td>pushed around...</td> <td>being bullied...</td> <td>by group addons...</td> </tr> </tbody> </table> <h2>Two bullying group-addons</h2> <table class="table"> <tbody> <tr> <td> <div class="input-group"> <div class="input-group-addon">x</div> <input id="cool" class="form-control"> </div> </td> <td> <div class="input-group"> <input id="cool" class="form-control"> <div class="input-group-addon">x</div> </div> </td> <td>pushed around...</td> <td>being bullied...</td> <td>by group addons...</td> </tr> </tbody> </table> <h2>No Bullies</h2> <table class="table"> <tbody> <tr> <td> <div class="input-group"> <input id="cool" class="form-control"> </div> </td> <td> <div class="input-group"> <input id="cool" class="form-control"> </div> </td> <td>pushed around...</td> <td>being bullied...</td> <td>by group addons...</td> </tr> </tbody> </table> <div class="alert alert-info">When there is no group-addon inside a table with class table, the spacing looks reasonable, but a single group-addon ruins it all</div>