Question

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样本时，我想知道是否有什么变化

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

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

您可以阅读有关网格系统here

的所有信息

希望这有帮助！

什么可能导致Bootstrap网格系统无法正常工作？

2 个答案: