调整引导表单字段的大小并对齐

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

只需在50% div中添加一个business宽度，并给它一个0 auto边距和center文本对齐值。

这是一个jsfiddle链接。

https://jsfiddle.net/2pnLj1mn/2/

（有关输入字段的大小，请参阅上面链接中包含的css注释。）

Answer 2

在text-center中使用<div class="col-xs-12 col-md-5 text-center">

编辑：

如果你使用Bootstrap，这将工作！此外，您可以使用text-aling:center;

Answer 3

显示表单中心使用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>