Question

我很难弄清楚如何在图片中构建一个像这样的联系表单;什么是在Bootstrap 3中获得输入控件的最佳方法？

我无法设法制作表格标签正方形并与图片中的标签对齐。

这是我目前的代码：

<footer>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 sub-text">
                <h1>
                    Contato
                </h1>
                <hr>
                <p>
                    Se deseja falar conosco, envie uma mensagem
                </p>
            </div><!-- end col -->
            <div class="col-sm-1">
            </div>
            <div class="col-sm-4">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label for="name"></label>
                        <input type="name" class="form-control" id="name" placeholder="Nome">
                    </div>
                </form>
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label for="email"></label>
                        <input type="email" class="form-control" id="email" placeholder="Email">
                    </div>
                </form>
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label for="phone"></label>
                        <input type="phone" class="form-control" id="phone" placeholder="Telefone">
                    </div>
                </form>
            </div>  
            <div class="col-sm-6">
                <fieldset class="form-group">
                    <label for="exampleTextarea"></label>
                    <textarea class="form-control" id="exampleTextarea" rows="5" placeholder="Mensagem" ></textarea>
                </fieldset>
            </div>
            <div class="col-sm-1">
            </div>
        </div><!-- end row -->

        <div class="row">
            <div class="col-sm-12 footer-text">
            <p>
                    Copyright © 2015 . Todos os direitos reservados.
            </p>
            </div>
        </div><!-- end row -->
    </div><!-- end container -->
</footer>

JsFiddle

Answer 1

调整您的代码以尝试复制图像中的输出。

覆盖应用于Bootstrap表单字段和文本区域的默认border-radius。
使用自定义边距类创建相等的间距和对齐方式。
调整输入字段的宽度以占据输出图像中显示的确切空间。不要使用col-sm-1创建水平空间，而是使用col-sm-offset-*类来提供它。

footer .form-inline .form-control,
footer .form-group textarea {
  border-radius: 0;
}
.vertical-offset-15 {
  margin-top: 15px;
}
.vertical-offset-5 {
  margin-top: 5px;
}
input {
  min-width: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<footer>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 sub-text">
        <h1>
                Contato
            </h1>
        <hr>
        <p>
          Se deseja falar conosco, envie uma mensagem
        </p>
      </div>
      <!-- end col -->

      <div class="col-sm-6 vertical-offset-5">
        <form class="form-inline" role="form">
          <div class="form-group vertical-offset-15">
            <label for="name"></label>
            <input type="name" class="form-control" id="name" placeholder="Nome">
          </div>
        </form>
        <form class="form-inline" role="form">
          <div class="form-group vertical-offset-15">
            <label for="email"></label>
            <input type="email" class="form-control" id="email" placeholder="Email">
          </div>
        </form>
        <form class="form-inline" role="form">
          <div class="form-group vertical-offset-15">
            <label for="phone"></label>
            <input type="phone" class="form-control" id="phone" placeholder="Telefone">
          </div>
        </form>
      </div>
      <div class="col-sm-6">
        <fieldset class="form-group">
          <label for="exampleTextarea"></label>
          <textarea class="form-control" id="exampleTextarea" rows="5" placeholder="Mensagem"></textarea>
        </fieldset>
      </div>

    </div>
    <!-- end row -->

    <div class="row">
      <div class="col-sm-12 footer-text">
        <p>
          Copyright © 2015 . Todos os direitos reservados.
        </p>
      </div>
    </div>
    <!-- end row -->
  </div>
  <!-- end container -->
</footer>

Answer 2

最好的方法是创建自定义类并通过boostrap类扩展它们，你应该使用网格系统使它更容易，网格应该是这样的

<div class="col-md-12">
  <h1 class="text-center">TITLE</h1>
    <div class="col-md-4">
      <p>left box</p>
    </div>
    <div class="col-md-8">
      <p>right box</p>
    </div>
</div>

请记住在代码中添加boostrap;）

自定义Bootstrap 3输入控件

2 个答案: