如果特定窗口大小之间的Bootstrap Table动作很奇怪

Question

我使用的是Bootstrap 2.2.1版。我创建了一个包含表格的网页。该表占用容器的整个宽度（100％）。但是，在不同大小的窗口之间，表格的反应不同。

请参阅附图以了解我的问题。

这是表格的代码

<table id="item-table" class="table table-striped">
    <thead>
        <tr>
            <th style="text-align: center; vertical-align: middle; width: 4%;"></th>
            <th style="text-align: center; vertical-align: middle; width: 14%;">Product</th>
            <th style="text-align: center; vertical-align: middle; width: 11%;">Source Type</th>
            <th style="text-align: center; vertical-align: middle; width: 17%;">Source Location</th>
            <th style="text-align: center; vertical-align: middle; width: 7%;">Rental Quantity</th>
            <th style="text-align: center; vertical-align: middle; width: 7%;">Consigned Quantity</th>
            <th style="text-align: center; vertical-align: middle; width: 11%;">Destination Type</th>
            <th style="text-align: center; vertical-align: middle; width: 17%;">Destination Location</th>
            <th style="text-align: center; vertical-align: middle; width: 12%;">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align: center;"><input class="specs-value" type="hidden" name="specs[]" value=""><a class="trigger-remove_item" href="javascript:void();"><i class="icon-adt_trash"></i></a></td>
            <td>
                <select name="model_id[]" class="trigger-model_id span12">
                    <option value="" selected="selected">Select a product in the list</option>
                </select>
            </td>
            <td>
                <select name="source_type[]" class="trigger-source_destination_type span12" data-action_type="0"><option value="0">T.B.D.</option><option value="1" selected="selected">Warehouse</option><option value="2">Show</option></select>
            </td>
            <td>
                <select name="source_id[]" class="span12">
                    <option value="2" selected="selected">High Tech Handling</option>
                    <option value="1">Montreal</option>
                </select>
            </td>
            <td>
                <input name="quantity_rental[]" type="text" value="0" class="span12"></td><td><input name="quantity_consigned[]" type="text" value="0" class="span12"></td><td><select name="destination_type[]" class="trigger-source_destination_type span12" data-action_type="1"><option value="0">T.B.D.</option><option value="1" selected="selected">Warehouse</option><option value="2">Show</option></select>
            </td>
            <td>
                <select name="destination_id[]" class="span12">
                    <option value="2" selected="selected">High Tech Handling</option>
                    <option value="1">Montreal</option>
                </select>
            </td>
            <td><input name="price[]" type="text" value="0.00" class="span12"></td>
        </tr>
        <tr>
            <td colspan="9"><a class="item-add" href="javascript:void();">Add an item to the contract</a></td>
        </tr>
    </tbody>
</table>

Answer 1

span12 

我猜不会做任何事情。尝试删除它们，然后可能强制表格仅使用th %展开。

我会在一些较小的数字框中添加span2或4。

在这里做了一些改变...尝试并告诉我它是否解决了问题。 http://jsfiddle.net/TWQ4S/3/