html - 调整 Bootstrap 表单字段的大小和对齐

Question

我正在尝试缩短 bootstrap 的宽度表单字段并将它们与中心对齐，但我还没有找到一种方法来做到这一点。

<div class="full-width" style="background:#eaeaea;">
  <div class="container" style="padding:30px 0;">
    <div class="business-container">
      <!--<a href="contacts.php" class="" style="color: #000; font-size: 14px; font-weight: bold;"></a>-->
      <div class="business">
        <h1>Lorem Ipsum dolor?</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <!-- Form -->
        <form>
          <div class="row">
            <div class="col-xs-12 col-md-5" style="margin: 12px 0;">
              <input type="text" class="form-control" placeholder="Name">
            </div>
            <div class="col-xs-12 col-md-5" style="margin: 12px 0;">
              <input type="email" class="form-control" placeholder="Email">
            </div>
            <div class="col-xs-12 col-md-5">
              <button type="submit" class="btn btn-primary mb-2" style="margin:-30px 0 0; width:100px;">Send</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

要显示表单中心，请使用 css 属性 margin:auto 和 width:50%。如下所示。

.business {
    margin: auto;
    width: 50%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="full-width" style="background:#eaeaea;">
  <div class="container" style="padding:30px 0;">
    <div class="business-container">
      <!--<a href="contacts.php" class="" style="color: #000; font-size: 14px; font-weight: bold;"></a>-->
      <div class="business">
        <h1>Lorem Ipsum dolor?</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <!-- Form -->
        <form>
          <div class="row">
            <div class="col-xs-12 col-md-5" style="margin: 12px 0;">
              <input type="text" class="form-control" placeholder="Name">
            </div>
            <div class="col-xs-12 col-md-5" style="margin: 12px 0;">
              <input type="email" class="form-control" placeholder="Email">
            </div>
            <div class="col-xs-12 col-md-5">
              <button type="submit" class="btn btn-primary mb-2" style="margin:0px 0 0; width:100px;">Send</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>