html - 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>...