HTML引导程序形式：如何在元素之间增加间距，增加文本区域的大小？

Question

我继承了一个小的webdev项目，但我对如何做两件事有些迷惑：

1）在元素之间添加更多空间（填充？）

2）增加我的文本区域（底部元素）中的行数

这是代码：

       <form class="contact-form" id="contactForm" action="php/contact2.php" method="post">

        <div class="form-row">
          <div class="col-md-12">
            <input type="text" name="senderName" id="firstName" placeholder="Fist Name" required>
          </div>



          <div class="form-row">
            <div class="col-md-12">
                <input type="text" name="lastName" id="lastName" placeholder="Last Name" required>
            </div>
        </div>

        <div class="form-row">
          <div class="col-md-12">
            <input type="text" name="institution" id="inst" placeholder="Institution" required>
          </div>
        </div>

        <div class="form-row">
          <div class="col-md-12">
            <input type="city" name="city" id="city" placeholder="City" required>
          </div>
          <div class="col-md-12">
            <input type="state/province" name="stateprov" id="stateProv" placeholder="State/Province" required>
          </div>
          <div class="col-md-12">
            <input type="text" name="country" id="country" placeholder="Country" required>
          </div>
          <div class="col-md-12">
            <input type="text" name="zipost" id="zipost" placeholder="Zip/Postal" required>
          </div>
        </div>

        <div class="form-row">
          <div class="col-md-12">
            <input type="text" name="phone" id="phone" placeholder="Phone" required>
          </div>
          <div class="col-md-12">
            <input type="text" name="senderEmail" id="email" placeholder="Email" required>
          </div>
          <div class="col-md-12">
            <input type="text" name="email" id="email" placeholder="Confirm Email" required>
          </div>
        </div>

        <div class="form-row">
          <div class="col-md-12">
            <input type="textarea" name="body" id="body" placeholder="Please describe your intended project(s), and how you plan to use the Apollo Platform." required>
          </div>
        </div>



        <div class="clearfix"></div>
        <div class="col-md-18">
          <button type="submit" class="btn-regular alignleft contact_button">Apply Now</button>
        </div>
      </form>

如何实现我的两个目标？ 谢谢！

Answer 1

CSS

.form-row div { margin-bottom: 10px; }
.form-row input[type="textarea"] { height: 200px; }

Answer 2

首先，没有文本区域的输入类型。 textarea表单元素的格式为：

<textarea name="body" id="body" placeholder="Please describe your intended project(s), and how you plan to use the Apollo Platform." required></textarea>

如果要向文本区域添加更多高度，则可以使用style="height:100px" ，也可以添加rows属性rows="5"

如果需要更多填充，则应使用bootstraps form-group类将标签和输入包装在一个块中，以保持bootstrap库中可用的自动填充格式。 您可能还需要考虑将内置样式的引导程序添加到表单输入和form-control textarea中

Answer 3

我会用：

.col-md-12{ padding-bottom: 10px; }

对于第一个问题。

第二个为什么不使用<textarea>标签呢？