html - Bootstrap 4表单字段未水平对齐

问题描述

我正在使用 Bootstrap 4 编写注册表单。我无法获取用户图像和传记的表单字段，以与其他表单字段对齐。

我已经通过几种方式调整了 CSS，但无法获得我想要的视觉效果，即：

传记和照片上传字段与所有表单字段宽度相同，并水平对齐
照片字段分成两个相等宽度的部分（有点像名字和姓氏字段），上传的图像在一个字段中水平对齐，按钮在第二个字段中水平对齐。

这是我的代码：

body {
  color: #fff;
  background: #63738a;
  font-family: 'Roboto', sans-serif;
}

.form-control {
  height: 40px;
  box-shadow: none;
  color: #969fa4;
}

.form-control:focus {
  border-color: #5cb85c;
}

.form-control,
.btn {
  border-radius: 3px;
}

.signup-form {
  width: 450px;
  margin: 0 auto;
  padding: 30px 0;
  font-size: 15px;
}

.signup-form h2 {
  color: #636363;
  margin: 0 0 15px;
  position: relative;
  text-align: center;
}

.signup-form h2:before,
.signup-form h2:after {
  content: "";
  height: 2px;
  width: 30%;
  background: #d4d4d4;
  position: absolute;
  top: 50%;
  z-index: 2;
}

.signup-form h2:before {
  left: 0;
}

.signup-form h2:after {
  right: 0;
}

.signup-form .hint-text {
  color: #999;
  margin-bottom: 30px;
  text-align: center;
}

.signup-form form {
  color: #999;
  border-radius: 3px;
  margin-bottom: 15px;
  background: #f2f3f7;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  padding: 30px;
}

.signup-form .form-group {
  margin-bottom: 20px;
}

.signup-form input[type="checkbox"] {
  margin-top: 3px;
}

.signup-form .btn {
  font-size: 16px;
  font-weight: bold;
  min-width: 140px;
  outline: none !important;
}

.signup-form .row div:first-child {
  padding-right: 10px;
}

.signup-form .row div:last-child {
  padding-left: 10px;
}

.signup-form a {
  color: #fff;
  text-decoration: underline;
}

.signup-form a:hover {
  text-decoration: none;
}

.signup-form form a {
  color: #5cb85c;
  text-decoration: none;
}

.signup-form form a:hover {
  text-decoration: underline;
}

.img-profile {
  width: 120px;
  height: 120px;
  margin-bottom: 15px
}

.avatar .figure img {
  float: right;
  width: 64px
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
  <title>Bootstrap Simple Registration Form</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="signup-form">
    <form action="#" method="post">
      <h2>Create Account</h2>

      <div class="form-group">
        <div class="row">
          <div class="col"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
          <div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
        </div>
      </div>

      <div class="form-group">
        <input type="text" class="form-control" name="screenname" placeholder="Username" required="required">
      </div>

      <div class="form-group avatar">
        <div class="row">
          <figure class="figure col-md-2 col-sm-3 col-xs-12">
            <img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
          </figure>
          <div class="form-inline col-md-10 col-sm-9 col-xs-12">
            <input type="file" class="file-uploader pull-left">
            <button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="user-bio" class="col-lg-2 control-label">Biography</label>
        <div class="col-lg-10">
          <textarea name="user-bio" id="user-bio" class="form-control" cols="20" rows="3" placeholder="Brief biography"></textarea>
        </div>
      </div>

      <div class="form-group">
        <input type="password" class="form-control" name="password" placeholder="Password" required="required">
      </div>
      <div class="form-group">
        <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
      </div>

      <div class="form-group">
        <button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
      </div>
    </form>
  </div>
</body>

</html>

如何解决表单中的对齐问题？

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

第 1 步通常是去掉您应用的所有自定义边距和填充。Bootstrap 通常不需要它们，而且它们往往会导致问题。

然后用一个容器包裹整个东西并在上面设置一个最大宽度：

body {
  color: #fff;
  background: #63738a;
  font-family: 'Roboto', sans-serif;
}

.form-control {
  height: 40px;
  box-shadow: none;
  color: #969fa4;
}

.form-control:focus {
  border-color: #5cb85c;
}

.form-control,
.btn {
  border-radius: 3px;
}

.signup-form {
  font-size: 15px;
  max-width: 450px;
}

.signup-form h2 {
  color: #636363;
  position: relative;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"/>

<div class="container signup-form">
  <form action="#" method="post">
    <h2>Create Account</h2>

    <div class="form-group">
      <div class="row">
        <div class="col"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
        <div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
      </div>
    </div>

    <div class="form-group">
      <input type="text" class="form-control" name="screenname" placeholder="Username" required="required">
    </div>

    <div class="form-group avatar">
      <div class="row">
        <figure class="figure col col-md-2 col-sm-3">
          <img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
        </figure>
        <div class="form-inline col-md-10 col-sm-9 col-xs-12">
          <input type="file" class="file-uploader pull-left">
          <button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label for="user-bio" class="control-label">Biography</label>
      <textarea name="user-bio" id="user-bio" class="form-control" cols="20" rows="3" placeholder="Brief biography"></textarea>
    </div>

    <div class="form-group">
      <input type="password" class="form-control" name="password" placeholder="Password" required="required">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
    </div>
  </form>
</div>

html - Bootstrap 4表单字段未水平对齐

问题描述

解决方案

推荐阅读