Twitter bootstrap v3x未正确显示复选框

Question

你好兄弟姐妹。 我有一个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中，即它没有。

复选框显示OK（FIREFOX）

复选框显示NOT OK（CHROME，OPERA和IE）

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

谢谢大家的时间和帮助。

Answer 1

谢谢你们，但最后，不知道为什么chrome和另一个渲染宽度为0px的跨度，所以我最终做到了这一点（不是一个优雅的解决方案......但是......好吧..anyway ..）

                                        <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的宽度，现在它的渲染方式应该是这样。