Twitter Bootstrap网格无法在浏览器中均匀运行

Question

我在使用Twitter Bootstrap 3在浏览器中统一显示表时遇到问题。

这是HTML：

<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <table class="table table-striped table-responsive first-table">
            <thead>
                <tr>
                    <th>Ingredient</th>
                    <th>Amount <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Amount" data-content="This is the amount of the ingredient you want to appear on the label." aria-hidden="true"></span></th>
                    <th>% Carrier <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Carrier" data-content="The amount of carrier (or salt) that's used with the ingredient.  This information should come from the quality assurance docs from the supplier." aria-hidden="true"></span></th>
                    <th>$$/Kilo <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Price" data-content="The price of the ingredient.  You should get this from your supplier." aria-hidden="true"></span></th>
                    <th>Who Sources? <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Source" data-content="Choose whether or not you or the manufacturer will source the ingredient." aria-hidden="true"></span></th>
                    <th>Pack Size <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="packSize" data-content="The minimum packsize of the ingredient supplied by the provider.  You only have to fill this out if you're sourcing the ingredient yourself." aria-hidden="true"></span></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr class="formulaRow">
                    <td>
                        <input type="text" class="ingredient required" name="ingredient">
                    </td>
            <div class="col-md-1">
                <td>
                    <div class="input-group">
                        <input type="number" class="amount required small-input" name="amount" >
                        <div class="input-group-addon">mg</div>
                    </div>

                </td>
            </div>
            <td>
                <div class = "input-group">
                    <input type="number" class="carrier required small-input" name="carrier" max="100">
                    <div class="input-group-addon">%</div>
                </div>
                <p class="message">Only use numbers smaller than 100</p>
            </td>
            <td>
                <div class="input-group">   
                    <div class="input-group-addon">$</div>
                    <input type="number" class="price required small-input" name="price" size="6">
                    <div class="input-group-addon">.00</div>
                </div>
            </td>
            <td>
                <select class="tableDropDown" style="min-width: 100px;">
                    <option value=true>The Manufacturer</option>
                    <option value=false>Me</option>
                </select>
            </td>
            <td>
                <div class="input-group">
                    <input class="packSize small-input" type="number" size="8" disabled>
                    <div class="input-group-addon">kg</div>
                </div>
            </td>
            <td>
                <a><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
            </td>
            <td>
                <a><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></a>
            </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

您也可以在此处查看：www.healthkismet.com/formula-analyzer/

这是在标题下显示的表格：“每服务”

我想要的是：它在屏幕上均匀居中，因此您无需向右滚动即可完成填充输入字段。

我的旅程：它在Mozilla中运行良好。当我从计算机上的文件中脱机查看时，它在Chrome中也能正常工作。

但是当我在网上查看它时，它在Chrome和IE中的右侧会流血。

我不确定为什么Mozilla会产生预期的效果，而不是其他两种效果。

最终目标是尽可能（或接近它）使其居中对齐。

此外，这里有两个截图来展示我在说什么。

在Chrome上，表格不会在右侧偏移，而是被推出窗口：

在Firefox中，它可以正确地证明：

Answer 1

您正在将表格单元格包装在div中。我认为这会破坏表格，不同的浏览器会以不同的方式处理。

尝试从

中删除<div class="col-md-1"></div>

<tr class="formulaRow">
    <td>
        <input type="text" class="ingredient required" name="ingredient">
    </td>
<div class="col-md-1">
    <td>
        <div class="input-group">
            <input type="number" class="amount required small-input" name="amount" >
            <div class="input-group-addon">mg</div>
        </div>
    </td>
</div>
<td>...