Question

我无法弄清楚如何将这些行居中在页面中间。我从Bootstrap获得了模板并正在修改它以适应我的网页。我希望行能够像上面的文字一样居中。这曾经是一个结帐表单示例，但我删除了行右侧的项目。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="col-md-8 order-md-1">
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="firstName">First name</label>
            <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
            <div class="invalid-feedback">
              Valid first name is required.
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <label for="lastName">Last name</label>
            <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
            <div class="invalid-feedback">
              Valid last name is required.
            </div>
          </div>
        </div>      

        <div class="row">
            <div class="col-md-5 mb-3">
            <label for="birthmonth">Birthday</label>
            <select class="custom-select d-block w-100" id="birthmonth" required>
              <option value="">Month</option>
              <option>January</option>
              <option>February</option>
              <option>March</option>
              <option>April</option>
              <option>May</option>
              <option>June</option>
              <option>July</option>
              <option>August</option>
              <option>September</option>
              <option>October</option>
              <option>November</option>
              <option>December</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid month.
            </div>
          </div>

          <div class="col-md-4 mb-3">
            <label for="zip">Day</label>
            <input type="text" class="form-control" id="birthday" placeholder="" required>
            <div class="invalid-feedback">
              Day is required.
            </div>

          </div>
          <div class="col-md-3 mb-3">
            <label for="birthyear">Year</label>
            <input type="text" class="form-control" id="birthyear" placeholder="" required>
            <div class="invalid-feedback">
              Year is required.
            </div>
          </div>
        </div>

        <div class="mb-3">
            <label for="country">University</label>
            <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>UC Berkeley</option>
              <option>UC Davis</option>
              <option>UC Irvine</option>
              <option>UCLA</option>
              <option>UC Riverside</option>
              <option>UC San Francisco</option>
              <option>UC Santa Barbara</option>
              <option>UC Santa Cruz</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid university.
            </div>
          </div>

        <div class="row">
          <div class="col-md-5 mb-3">
            <label for="country">Country</label>
            <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>United States</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid country.
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <label for="state">State</label>
            <select class="custom-select d-block w-100" id="state" required>
              <option value="">Choose...</option>
              <option>California</option>
            </select>
            <div class="invalid-feedback">
              Please provide a valid state.
            </div>
          </div>
          <div class="col-md-3 mb-3">
            <label for="zip">Zip</label>
            <input type="text" class="form-control" id="zip" placeholder="" required>
            <div class="invalid-feedback">
              Zip code required.
            </div>
          </div>
        </div>

        <div class="mb-3">
          <label for="email">Password</label>
          <input type="email" class="form-control" id="Password" placeholder="Password">
          <div class="invalid-feedback">
            Please enter a valid email address for shipping updates.
          </div>
        </div>

        <div class="mb-3">
          <label for="address">Repeat Password</label>
          <input type="text" class="form-control" id="Password" placeholder="Password" required>
          <div class="invalid-feedback">
            Please enter the same password.
          </div>
        </div>

        <hr class="mb-4">
        <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
    </div>

Answer 1

就像@Klooven所说，添加justify-content-center会解决它。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8 order-md-1">
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="firstName">First name</label>
          <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
          <div class="invalid-feedback">
            Valid first name is required.
          </div>
        </div>
        <div class="col-md-6 mb-3">
          <label for="lastName">Last name</label>
          <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
          <div class="invalid-feedback">
            Valid last name is required.
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-5 mb-3">
          <label for="birthmonth">Birthday</label>
          <select class="custom-select d-block w-100" id="birthmonth" required>
              <option value="">Month</option>
              <option>January</option>
              <option>February</option>
              <option>March</option>
              <option>April</option>
              <option>May</option>
              <option>June</option>
              <option>July</option>
              <option>August</option>
              <option>September</option>
              <option>October</option>
              <option>November</option>
              <option>December</option>
            </select>
          <div class="invalid-feedback">
            Please select a valid month.
          </div>
        </div>

        <div class="col-md-4 mb-3">
          <label for="zip">Day</label>
          <input type="text" class="form-control" id="birthday" placeholder="" required>
          <div class="invalid-feedback">
            Day is required.
          </div>

        </div>
        <div class="col-md-3 mb-3">
          <label for="birthyear">Year</label>
          <input type="text" class="form-control" id="birthyear" placeholder="" required>
          <div class="invalid-feedback">
            Year is required.
          </div>
        </div>
      </div>

      <div class="mb-3">
        <label for="country">University</label>
        <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>UC Berkeley</option>
              <option>UC Davis</option>
              <option>UC Irvine</option>
              <option>UCLA</option>
              <option>UC Riverside</option>
              <option>UC San Francisco</option>
              <option>UC Santa Barbara</option>
              <option>UC Santa Cruz</option>
            </select>
        <div class="invalid-feedback">
          Please select a valid university.
        </div>
      </div>

      <div class="row">
        <div class="col-md-5 mb-3">
          <label for="country">Country</label>
          <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>United States</option>
            </select>
          <div class="invalid-feedback">
            Please select a valid country.
          </div>
        </div>
        <div class="col-md-4 mb-3">
          <label for="state">State</label>
          <select class="custom-select d-block w-100" id="state" required>
              <option value="">Choose...</option>
              <option>California</option>
            </select>
          <div class="invalid-feedback">
            Please provide a valid state.
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="zip">Zip</label>
          <input type="text" class="form-control" id="zip" placeholder="" required>
          <div class="invalid-feedback">
            Zip code required.
          </div>
        </div>
      </div>

      <div class="mb-3">
        <label for="email">Password</label>
        <input type="email" class="form-control" id="Password" placeholder="Password">
        <div class="invalid-feedback">
          Please enter a valid email address for shipping updates.
        </div>
      </div>

      <div class="mb-3">
        <label for="address">Repeat Password</label>
        <input type="text" class="form-control" id="Password" placeholder="Password" required>
        <div class="invalid-feedback">
          Please enter the same password.
        </div>
      </div>

      <hr class="mb-4">
      <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
    </div>
  </div>
</div>

＆＃13;

Answer 2

使用保证金：0自动;在这

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
	<title></title>
</head>
<body>
<div class="container">
<div class="row ">
 <div class="col-md-8 col-offset-md-2 order-md-1" style="margin:0 auto">
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="firstName">First name</label>
            <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
            <div class="invalid-feedback">
              Valid first name is required.
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <label for="lastName">Last name</label>
            <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
            <div class="invalid-feedback">
              Valid last name is required.
            </div>
          </div>
        </div>      

        <div class="row">
            <div class="col-md-5 mb-3">
            <label for="birthmonth">Birthday</label>
            <select class="custom-select d-block w-100" id="birthmonth" required>
              <option value="">Month</option>
              <option>January</option>
              <option>February</option>
              <option>March</option>
              <option>April</option>
              <option>May</option>
              <option>June</option>
              <option>July</option>
              <option>August</option>
              <option>September</option>
              <option>October</option>
              <option>November</option>
              <option>December</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid month.
            </div>
          </div>

          <div class="col-md-4 mb-3">
            <label for="zip">Day</label>
            <input type="text" class="form-control" id="birthday" placeholder="" required>
            <div class="invalid-feedback">
              Day is required.
            </div>

          </div>
          <div class="col-md-3 mb-3">
            <label for="birthyear">Year</label>
            <input type="text" class="form-control" id="birthyear" placeholder="" required>
            <div class="invalid-feedback">
              Year is required.
            </div>
          </div>
        </div>

        <div class="mb-3">
            <label for="country">University</label>
            <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>UC Berkeley</option>
              <option>UC Davis</option>
              <option>UC Irvine</option>
              <option>UCLA</option>
              <option>UC Riverside</option>
              <option>UC San Francisco</option>
              <option>UC Santa Barbara</option>
              <option>UC Santa Cruz</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid university.
            </div>
          </div>

        <div class="row">
          <div class="col-md-5 mb-3">
            <label for="country">Country</label>
            <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>United States</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid country.
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <label for="state">State</label>
            <select class="custom-select d-block w-100" id="state" required>
              <option value="">Choose...</option>
              <option>California</option>
            </select>
            <div class="invalid-feedback">
              Please provide a valid state.
            </div>
          </div>
          <div class="col-md-3 mb-3">
            <label for="zip">Zip</label>
            <input type="text" class="form-control" id="zip" placeholder="" required>
            <div class="invalid-feedback">
              Zip code required.
            </div>
          </div>
        </div>

        <div class="mb-3">
          <label for="email">Password</label>
          <input type="email" class="form-control" id="Password" placeholder="Password">
          <div class="invalid-feedback">
            Please enter a valid email address for shipping updates.
          </div>
        </div>

        <div class="mb-3">
          <label for="address">Repeat Password</label>
          <input type="text" class="form-control" id="Password" placeholder="Password" required>
          <div class="invalid-feedback">
            Please enter the same password.
          </div>
        </div>

        <hr class="mb-4">
        <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
    </div>
  </div>
  </div>
</body>
</html>

＆＃13;

如何将页面中间的行块居中

2 个答案: