为什么我的Bootstrap列居中而不是左对齐?

问题描述

我正在使用标准的Bootstrap 3 CSS.

I am using standard 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.为什么确认新密码是 col-sm-4 时居中?

I would expect the <form> in the HTML to mirror the HTML/CSS above (Tell US More About Yourself), but instead I get the Confirm New Password label stuck in the center even though it should float:left; and be under the New Password label. The form doesn't have any special CSS. Why is Confirm New Password being centered like that when it is a col-sm-4?

我当前的视口是一台达到 lg 断点的笔记本电脑，但奇怪的是，此错误仅显示在768px至1600px之间.当我使用Chrome Dev Tools设置宽桌面视口时，会得到正确的格式...但是我不明白为什么会给我断点.

My current viewport is a laptop that reaches the lg breakpoint, but oddly enough this error only shows up between 768px and about 1600px. When I use the Chrome Dev Tools to set a wide desktop viewport I get the right format... but I don't understand why that is given my breakpoints.

推荐答案

您正面临浮动问题，因为您没有将元素包装在 .row 中在此问题中:可变高度的浮动元素会将同级向下推

You are facing floating issue as you are not wraping your element inside .row as you can see in this question : Floated elements of variable height push siblings down

如果不使用bootstrap提供的容器/行，这就是您要拥有的东西:

So here is what you are having if you don't use container/row provided with 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>

如果您按照引导程序规则正确地构造了元素，您将获得以下信息:

And if you correctly structure your elements following bootstrap rules you obtain this:

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>

这篇关于为什么我的Bootstrap列居中而不是左对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！