【发布时间】：2018-06-09 23:40:34
【问题描述】：
我正在使用标准的 Bootstrap 3 CSS。
我的问题图片：
我的 HTML 如下：
<div class="col-sm-12 col-lg-6 col-lg-offset-3 relative text-center">
<h3 class="text-center">Tell Us More About Yourself:</h3>
<label for="motto" class="col-sm-4 control-label">Motto:</label>
<div class="col-sm-8">
<input id="motto" type="text" class="form-control" name="motto" ng-model="profile.UserParams.Motto">
</div>
</br>
</br>
<label for="occupation" class="col-sm-4 control-label">Occupation:</label>
<div class="col-sm-8">
<input id="occupation" type="text" class="form-control" name="occupation" ng-model="profile.UserParams.Occupation">
</div>
</br>
</br>
<label for="location" class="col-sm-4 control-label">Location:</label>
<div class="col-sm-8">
<input id="location" type="text" class="form-control" name="location" ng-model="profile.UserParams.Location">
</div>
</br>
</br>
<button style="margin-top:25px;" class="btn btn-lg btn-primary" ng-click="updateProfile()">Update Profile</button>
</div>
<div style="margin-top:50px;" class="col-sm-12 col-lg-6 col-lg-offset-3 relative text-center">
<h3>Change Your Password:</h3>
<div class="form-group">
<form name="changePassword">
<label for="password" class="col-sm-4 control-label">New Password (must be at least 5 characters long):</label>
<div class="col-sm-8">
<input id="password" type="password" class="form-control" name="password" ng-minlength="5" ng-model="user.password" required>
</div>
</br>
</br>
<label for="cpassword" class="col-sm-4 control-label">Confirm New Password:</label>
<div class="col-sm-8">
<input id="cpassword1" type="password" class="form-control" name="cpassword" ng-minlength="5" ng-model="user.confirmPassword" compare-to="user.password" required>
<div ng-messages="changePassword.cpassword.$error" style="color:maroon" role="alert">
<div ng-message="compareTo">Your passwords must match!</div>
<div ng-message="minlength">Your password is too short!</div>
</div>
</div>
</br>
</br>
<button style="margin-top:25px;" class="btn btn-lg btn-danger" ng-click="changePasswordFunction()">Change Password</button>
</form>
</div>
</br>
</br>
</div>
我希望 HTML 中的 <form> 反映上面的 HTML/CSS（请告诉我们更多关于您自己的信息），但我却将 Confirm New Password 标签卡在了中间，即使它应该是 float:left; 并且是在New Password 标签下。该表单没有任何特殊的 CSS。为什么Confirm New Password 是col-sm-4 时会这样居中？
我当前的视口是一台到达lg 断点的笔记本电脑，但奇怪的是，这个错误只显示在 768 像素到大约 1600 像素之间。当我使用 Chrome 开发工具设置宽桌面视口时，我得到了正确的格式......但我不明白为什么会给出我的断点。
【问题讨论】：
-
因为浮动..你应该将它们包裹在
row中......你没有遵循引导规则，你必须使用容器和行 -
@TemaniAfif 但我没有将其他人排成一排？
标签： css twitter-bootstrap