我正在使用标准的 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>
我希望 <form>
在 HTML 中镜像上面的 HTML/CSS(告诉我们更多关于你自己的信息),但我得到了 Confirm New Password
标签卡在中心,即使它应该 float:left;
并在 New Password
下标签。该表单没有任何特殊的 CSS。为什么是Confirm New Password
当它是一个 col-sm-4
时像那样居中?
我当前的视口(viewport)是一台达到 lg
的笔记本电脑断点,但奇怪的是,这个错误只出现在 768px 和大约 1600px 之间。当我使用 Chrome Dev Tools 设置宽桌面视口(viewport)时,我得到了正确的格式......但我不明白为什么要给我断点。
最佳答案
您面临 float 问题,因为您没有将元素包装在 .row
中,正如您在这个问题中看到的那样:Floated elements of variable height push siblings down
如果您不使用 Bootstrap 提供的容器/行,那么这就是您所拥有的:
div {
border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-4">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
<div class="col-xs-8">
lorem ipsum lorem ipsum lore
</div>
<div class="col-xs-4">
lorem ipsum lorem ipsum lorem ipsu
</div>
<div class="col-xs-8">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
如果您按照 Bootstrap 规则正确构建元素,您将获得:
div {
border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-4">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
<div class="col-xs-8">
lorem ipsum lorem ipsum lore
</div>
</div>
<div class="row">
<div class="col-xs-4">
lorem ipsum lorem ipsum lorem ipsu
</div>
<div class="col-xs-8">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
关于css - 为什么我的 Bootstrap 列居中而不是左对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48024162/