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

在text-center

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

编辑：

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

Answer 2

只需为50% div添加business宽度，并为其提供0 auto页边距和center文字对齐值。

这是一个jsfiddle链接。

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

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

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>

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

3 个答案: