哪些可能会导致 Bootstrap Grid 系统无法正常工作？答案

【问题标题】：What possibilities would cause Bootstrap Grid system not work properly?哪些可能会导致 Bootstrap Grid 系统无法正常工作？
【发布时间】：2015-10-18 09:30:03
【问题描述】：

我在使用 BootStrap 网格系统时发生了一些奇怪的事情，一切正常，我添加了 AspIdentity 样本，并且网格系统正常工作，但是当我再次检查时，很多东西都不是以前的长度了.我在 bootply 中仔细检查了我的标记，它可以工作，但现在不会在我的项目中.. 代码示例是这样的

<div class="form-group">
    <label for="txtNewAdmin" class="control-label col-md-2" id="lblAdministrationAdministrator"><b>Administrator</b></label>
    <div class="col-md-6">
        <input id="txtNewAdmin" type="text" class="form-control" name="administrator" />
    </div>
</div>
<div class="form-group">
    <label for="txtPassword" class="control-label col-md-2" id="lblAdministrationAdministratorPassword"><b>Password</b></label>
    <div class="col-md-6">
        <input id="txtPassword" type="password" class="form-control" name="password" />
    </div>
    <div class="col-md-2">
        <input id="btnResetAdminPassword" type="button" value="Reset" class="btn btn-success" />
    </div>
</div>
<div class="form-group">
    <label for="txtConfirmPassword" class="control-label col-md-2" id="lblAdministrationAdministratorConfirmPassword"><b>Confirm Password</b></label>
    <div class="col-md-6">
        <input id="txtConfirmPassword" type="text" class="form-control" name="confirmPassword" />
    </div>
</div>
<div class="form-group">
    <label for="txtAdministratorEmail" class="control-label col-md-2" id="lblAdministrationAdministratorEmail"><b>Email</b></label>
    <div class="col-md-6">
        <input id="txtAdministratorEmail" type="text" class="form-control" name="email" />
    </div>
</div>

这是现在的样子：

从代码中可以看出，它看起来不像代码所建议的那样，文本字段的长度应该一直到重置按钮。

我不知道发生了什么，有什么我应该检查的吗？或者有没有人发生过类似的事情？

编辑我还应该补充一点，我所有的观点都会受到同样的影响。

更多完整代码和新屏幕截图

    <div class="form-horizontal">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#Profile" data-toggle="tab">Profile</a></li>
        <li><a href="#Dealers" data-toggle="tab">Dealers</a></li>
    </ul>
    <div class="tab-content">

        <div class="tab-pane active" id="Profile">
            <br />
            <fieldset class="Myfieldset">
                <legend class="Mylegend">Profile</legend>
                <div class="form-group">
                    <label for="txtModeratorUserName" class="control-label col-md-2" id="lblModeratorUserName"><b>Username:</b></label>
                    <div class="col-md-6">
                        <input id="txtModeratorUser" type="text" class="form-control" disabled />
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtModeratorPassword" class="control-label col-md-2" id="lblModeratorPassword"><b>Password:</b></label>
                    <div class="col-md-6">
                        <input id="txtModeratorPassword" type="text" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtModeratorVerifyPassword" class="control-label col-md-2" id="lblModeratorVerifyPassword"><b>Verify Password:</b></label>
                    <div class="col-md-6">
                        <input id="txtModeratorVerifyPassword" type="text" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtModeratorModerator" class="control-label col-md-2" id="lblModeratorModerator"><b>Manufacturer:</b></label>
                    <div class="col-md-6">
                        <input id="txtModeratorModerator" type="text" class="form-control" disabled />
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtModeratorCatalogVersion" class="control-label col-md-2" id="lblModeratorCatalogVersion"><b>Catalog Version:</b></label>
                    <div class="col-md-6">
                        <input id="txtModeratorCatalogVersion" type="text" class="form-control" disabled />
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtModeratorEmail" class="control-label col-md-2" id="lblModeratorEmail"><b>Email:</b></label>
                    <div class="col-md-6">
                        <input id="txtModeratorEmail" type="text" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-4 col-md-offset-6">
                        <input id="btnUpdateModerator" type="button" value="Update" class="btn btn-primary" />
                        <input id="btnResetModerator" type="button" value="Reset" class="btn btn-primary" />
                    </div>
                </div>
            </fieldset>
        </div>

        <div class="tab-pane" id="Dealers">
            <br />
            <fieldset class="Myfieldset">
                <legend class="Mylegend">Users</legend>

                <div class="form-group">
                    <label for="acModeratorDealer" class="control-label col-md-2" id="lblModeratorDealer"><b>Dealer:</b></label>
                    <div class="col-md-8">
                        <input id="acModeratorDealer" type="text" class="form-control" name="dealer" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtModeratorUserPassword" class="control-label col-md-2" id="lblModeratorUserPassword"><b>Password:</b></label>
                    <div class="col-md-8">
                        <input id="txtModeratorUserPassword" type="password" class="form-control" name="dealerpassword" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtModeratorVerifyUserPassword" class="control-label col-md-2" id="lblModeratorVerifyUserPassword"><b>Verify Password:</b></label>
                    <div class="col-md-8">
                        <input id="txtModeratorVerifyUserPassword" type="text" class="form-control" name="confirmpassword" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtModeratorUserEmail" class="control-label col-md-2" id="lblModeratorUserEmail"><b>Email:</b></label>
                    <div class="col-md-8">
                        <input id="txtModeratorUserEmail" type="text" class="form-control" name="email" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="msManufacturerCatalog" class="control-label col-md-2" id="lblManufacturerCatalog"><b>Catalog:</b></label>
                    <div class="col-md-8">
                        <select id="msManufacturerCatalog" multiple name="catalog"></select>
                    </div>
                </div>
                <div class="col-md-6">
                    <fieldset>
                        <legend><h4><b>Address</b></h4></legend>
                        <div class="form-group">
                            <label for="txtManufacturerDealerAddress1" class="control-label col-md-2" id="lblManufacturerDealerAddress1">Address</label>
                            <div class="col-md-10">
                                <input id="txtManufacturerDealerAddress1" type="text" class="form-control max-size" name="address" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtManufacturerDealerAddress2" class="control-label col-md-2" id="lblManufacturerDealerAddress2">Address2</label>
                            <div class="col-md-10">
                                <input id="txtManufacturerDealerAddress2" type="text" class="form-control max-size" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtManufacturerDealerCity" class="control-label col-md-2" id="lblManufacturerDealerCity">City</label>
                            <div class="col-md-10">
                                <input id="txtManufacturerDealerCity" type="text" class="form-control max-size" name="city" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtManufacturerDealerState" class="control-label col-md-2" id="lblManufacturerDealerState">State</label>
                            <div class="col-md-4">
                                <input id="txtManufacturerDealerState" type="text" class="form-control" name="state" />
                            </div>
                            <label for="txtManufacturerDealerZip" class="control-label col-md-2" id="lblManufacturerDealerZip">Zip/Postal</label>
                            <div class="col-md-4">
                                <input id="txtManufacturerDealerZip" type="text" class="form-control" name="zip" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="acDealerCountry" class="control-label col-md-2" id="lblManufacturerDealerCity">Country</label>
                            <div class="col-md-10">
                                <input id="acCountry" type="text" class="form-control max-size" name="country" />
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-md-6">
                    <fieldset>
                        <legend><h4><b>Contact</b></h4></legend>
                        <div class="form-group">
                            <label for="txtManufacturerDealerContact" class="control-label col-md-2" id="lblManufacturerDealerContact">Contact</label>
                            <div class="col-md-10">
                                <input id="txtManufacturerDealerContact" type="text" class="form-control max-size" name="contact" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtManufacturerDealerPhone" class="control-label col-md-2" id="lblManufacturerDealerPhone">Phone</label>
                            <div class="col-md-10">
                                <input id="txtManufacturerDealerPhone" type="text" class="form-control max-size" name="phone" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtManufacturerDealerWorkPhone" class="control-label col-md-2" id="lblManufacturerDealerWork">Work</label>
                            <div class="col-md-10">
                                <input id="txtManufacturerDealerWorkPhone" type="text" class="form-control max-size" name="work" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtManufacturerDealerFax" class="control-label col-md-2" id="lblManufacturerDealerFax">Fax</label>
                            <div class="col-md-10">
                                <input id="txtManufacturerDealerFax" type="text" class="form-control max-size" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtManufacturerDealerMobile" class="control-label col-md-2" id="lblManufacturerDealerMobile">Mobile</label>
                            <div class="col-md-10">
                                <input id="txtManufacturerDealerMobile" type="text" class="form-control max-size" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtManufacturerDealerOther" class="control-label col-md-2" id="lblManufacturerDealerOther">Other</label>
                            <div class="col-md-10">
                                <input id="txtManufacturerDealerOther" type="text" class="form-control max-size" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-4 col-md-offset-2">
                                <input id="btnSaveDealerInfo" type="button" value="Save" class="btn btn-primary" />
                                <input id="btnCancelDealerInfo" type="button" value="Cancel" class="btn btn-primary" />
                            </div>
                        </div>
                    </fieldset>
                </div>
            </fieldset>
            <br/>
            <fieldset class="Myfieldset">
                <legend class="Mylegend">Current Users</legend>
            </fieldset>
        </div>
    </div>
</div>

某些区域受到影响，所以我想知道当我从 nuget 安装 aspidentity 样本时是否发生了变化

【问题讨论】：

您使用的是哪个版本的引导程序？
@Eric，我使用的是 3.3.4

标签： html asp.net-mvc twitter-bootstrap

【解决方案1】：

不完全确定您使用的是哪个浏览器，但在我将class form-horizontal 添加到您的内容周围的form 标记后，它对我有用。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>

<form class="form-horizontal">
    <div class="form-group">
        <label for="txtNewAdmin" class="control-label col-md-2" id="lblAdministrationAdministrator"><b>Administrator</b></label>
        <div class="col-md-6">
            <input id="txtNewAdmin" type="text" class="form-control" name="administrator" />
        </div>
    </div>
    <div class="form-group">
        <label for="txtPassword" class="control-label col-md-2" id="lblAdministrationAdministratorPassword"><b>Password</b></label>
        <div class="col-md-6">
            <input id="txtPassword" type="password" class="form-control" name="password" />
        </div>
        <div class="col-md-2">
            <input id="btnResetAdminPassword" type="button" value="Reset" class="btn btn-success" />
        </div>
    </div>
    <div class="form-group">
        <label for="txtConfirmPassword" class="control-label col-md-2" id="lblAdministrationAdministratorConfirmPassword"><b>Confirm Password</b></label>
        <div class="col-md-6">
            <input id="txtConfirmPassword" type="text" class="form-control" name="confirmPassword" />
        </div>
    </div>
    <div class="form-group">
        <label for="txtAdministratorEmail" class="control-label col-md-2" id="lblAdministrationAdministratorEmail"><b>Email</b></label>
        <div class="col-md-6">
            <input id="txtAdministratorEmail" type="text" class="form-control" name="email" />
        </div>
    </div>
</form>

【讨论】：

我确实把所有东西都包裹在一个
....
还有很多代码，这只是一个 sn-p
我认为那可能是你的问题。 form-control 仅用于格式化 HTML 表单元素，而不是 divs。
我只是尝试使用表单标签而不是 div 和相同的问题。我真的不知道发生了什么..我正在浏览器中查看我的视图，看起来只有某些事情受到影响，我将发布我的其他视图之一及其代码的图片，你会看到它只影响某些区域

【解决方案2】：

引导网格系统由 12 列而不是 8 列组成，因为您告诉您的代码要使用，如果您将 col-md-6 更改为 col-md-8 或将 col-md-2 更改为 col-md-4 您的页面应该可以工作很好。

你可以阅读所有关于hte网格系统here

希望这会有所帮助！

【讨论】：

我尝试将 cols 更改为更大但效果相同，之前效果很好