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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了调整引导表单字段的大小并对齐相关的知识,希望对你有一定的参考价值。

我正在尝试缩短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>
答案

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

这是一个jsfiddle链接。

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

(有关输入字段的大小,请参阅上面链接中包含的css注释。)

另一答案

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

编辑:

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

另一答案

显示表单中心使用css属性margin:autowidth: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>

以上是关于调整引导表单字段的大小并对齐的主要内容,如果未能解决你的问题,请参考以下文章

css CSS对齐和大小调整片段

如何使用引导程序设置表单字段大小?

动态调整引导卡标题以对齐图像

使用水平形式对齐引导文本框

引导按钮未调整大小

响应式设计:如何调整图像/背景图像的大小并垂直对齐 div?