css – 组插件在引导表中占用太多空间

当我将.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/

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

试试你的Less / CSS：

.input-group-addon {
width:auto;
}