组插件在bootstrap表中占用太多空间

Question

当我向引导程序.group-addon内的元素添加.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而不占用太多空间？

Answer 1

试试你的Less / CSS：

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

Answer 2

问题出在你的bootstrap.min.css第9行，你有这个规则：

.input-group-addon, .input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}

你应该删除width: 1%;或者只是覆盖以下内容：

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

DEMO