Why is my Bootstrap column centered instead of lef

问题:

I am using standard Bootstrap 3 CSS.

Image of my issue:

My HTML is below:

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

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?

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.

回答1:

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

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>

回答2:

You have to use bootstrap row column rules for the aligned layout mentioned here like below inside the form

Note: See the following snippet in expand preview

<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-sm-12 col-lg-6 col-lg-offset-3 relative text-center">
      <h3 class="text-center">Tell Us More About Yourself</h3>
      <div class="row">
        <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>
      </div>
      <br>
      <br>
      <div class="row">
        <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>
      </div>
      <br>
      <br>
      <div class="row">
        <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>
      </div>
      <br>
      <br>
      <button style="margin-top:25px;" class="btn btn-lg btn-primary" ng-click="updateProfile()">Update Profile</button>
    </div>
  </div>
  <div class="row">
    <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">
          <div class="row">
            <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>
          </div>
          <br>
          <br>
          <div class="row">
            <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>
          </div>
          <br>
          <br>
          <button style="margin-top:25px;" class="btn btn-lg btn-danger" ng-click="changePasswordFunction()">Change Password</button>
        </form>
      </div>
    </div>
    <br>
    <br>
  </div>
</div>

回答3:

There is no need to float them, if you are using bootstrap, just use rows and columns, wrap elements inside those classes. Float is what is messing with your style. Also, I would recommend using css Flexbox in the future, it is much better and more flexible than bootstrap.