html - Twitter bootstrap v3x 未正确显示复选框

Question

sibling 们好。我对 twitter bootstrap 复选框有一点问题，主要是在 opera、chrome 和 ie 中呈现时。这里是:我有这段代码

<div class="form-group">
                                <asp:Label ID="LblItemAnulado" Text="Item Anulado" runat="server"  CssClass="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label" />
                                <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <input type="checkbox" aria-label="...">
                                        </span>
                                        <input type="text" class="form-control" aria-label="...">
                                    </div>
                                </div>
                            </div>

此 html 代码在 firefox 中呈现良好，即复选框控件正确显示；然而，在 chrome、opera 和 ie 中却没有。

复选框显示正常(FIREFOX)

复选框显示不正常(Chrome、OPERA 和 IE)

如果我找不到解决方案，那么我将使用带有是/否选项的下拉列表。但我至少想知道为什么会这样。

感谢大家的宝贵时间和帮助。

Answer 1

谢谢你们，但最后，不知道为什么 chrome 和其他渲染宽度为 0px 的跨度，所以我最终这样做了(不是一个优雅的解决方案..但是......好吧..无论如何..)

                                        <div class="input-group" style="width:100%;">
                                        <span class="input-group-addon" style="width:40px;">
                                            <input type="checkbox" aria-label="...">
                                        </span>
                                        <input type="text" class="form-control" aria-label="...">
                                    </div>

所以我为 div 添加了 100% 的宽度，为 span 添加了 40px 的宽度，现在它以应有的方式呈现。