Question

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

我的问题图片：

我的HTML如下：

/// Subclass of `Operation` that add support of asynchronous operations.
/// ## How to use:
/// 1. Call `super.main()` when override `main` method, call `super.start()` when override `start` method.
/// 2. When operation is finished or cancelled set `self.state = .finished`
class AsynchronousOperation: Operation {
    override var isAsynchronous: Bool { return true }
    override var isExecuting: Bool { return state == .executing }
    override var isFinished: Bool { return state == .finished }

    var state = State.ready {
        willSet {
            willChangeValue(forKey: state.keyPath)
            willChangeValue(forKey: newValue.keyPath)
        }
        didSet {
            didChangeValue(forKey: state.keyPath)
            didChangeValue(forKey: oldValue.keyPath)
        }
    }

    enum State: String {
        case ready = "Ready"
        case executing = "Executing"
        case finished = "Finished"
        fileprivate var keyPath: String { return "is" + self.rawValue }
    }

    override func start() {
        if self.isCancelled {
            state = .finished
        } else {
            state = .ready
            main()
        }
    }

    override func main() {
        if self.isCancelled {
            state = .finished
        } else {
            state = .executing
        }
    }
}

我希望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 / CSS（告诉我们更多关于你自己），但我会将<form>标签卡在中心，即使它应该{ {1}}并位于Confirm New Password标签下。表单没有任何特殊的CSS。为什么float:left;在New Password时会像那样居中？

我当前的视口是一台达到Confirm New Password断点的笔记本电脑，但奇怪的是这个错误只显示在768px到1600px之间。当我使用Chrome开发工具设置一个宽大的桌面视口时，我得到了正确的格式...但我不明白为什么给出了我的断点。

Answer 1

您正面临浮动问题，因为您没有在.row内包裹您的元素，正如您在此问题中所看到的那样：Floated elements of variable height push siblings down

如果您不使用带有引导程序的容器/行，那么这就是您所拥有的：

＆＃13;

div {
  border: 1px solid;
}

＆＃13;

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

＆＃13;

如果按照引导规则正确构造元素，则可以获得：

＆＃13;

div {
  border: 1px solid;
}

＆＃13;

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

＆＃13;

Answer 2

您必须使用引导row column规则来处理form

中提及的here对齐布局

注意：请参阅展开预览中的以下代码段

＆＃13;

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

＆＃13;

Answer 3

没有必要浮动它们，如果你使用bootstrap，只需使用行和列，在这些类中包装元素。浮动就是弄乱你的风格。此外，我建议将来使用css Flexbox，它比bootstrap更好，更灵活。

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

3 个答案: