Why is my Bootstrap column centered instead of left-aligned?

Question

I am using standard Bootstrap 3 CSS.

Image of my issue:

My HTML is below:

        
                      

              相关标签:
       
      

Answer 1

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>

Answer 2

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.

Answer 3

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>