如何通过输入保持textarea的高度相等？

Question

如何将消息的顶部（textarea）输入内联输入名称，并将底部内联电话输入？

我希望消息textarea的高度与左侧的3个输入相同。我真的希望边界很好地排列

我尝试过手动指定高度，但是一旦窗口大小发生变化，高度就会发生变化，导致设计失效。

如何在保持响应的同时实现这一目标？

要查看图片中的结果，您必须展开可视区域（由于引导程序md）这是一个外部链接。 https://jsfiddle.net/6ma7ndmL/3/

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700');
 section {
  width: 100%;
  padding: 4em 0;
}
@media screen and (min-width: 768px) {
  section .container,
  section .row {
    padding: 0;
  }
}
header.section-header {
  text-align: center;
  padding: 0 0 3em;
}
header.section-header h2 {
  font-size: 2em;
}
section.contact form {
  font-family: 'Roboto Mono';
  color: #000;
}
section.contact form input,
section.contact form textarea {
  border-color: #000;
  border-width: 2px;
  border-radius: 0;
  transition: 0.4s border-color ease;
}
section.contact form input:focus,
section.contact form textarea:focus {
  transition: 0.4s border-color ease;
  border-color: #f33;
}
section.contact form textarea {
  resize: none;
}
section.contact form button.btn {
  background-color: #000;
  border-color: #000;
  border-width: 2px;
  color: #fff;
  outline: none;
  border-radius: 0;
  float: right;
  transition: 0.4s background-color ease, 0.4s color ease, 0.4s border-color ease;
}
section.contact form button.btn:hover {
  transition: 0.4s background-color ease, 0.4s color ease, 0.4s border-color ease;
  background-color: #fff;
  color: #000;
  border-color: #f33;
}
@media screen and (min-width: 768px) {
  section.contact form [class^='col-']:nth-child(1) {
    padding-left: 0;
  }
  section.contact form [class^='col-']:nth-child(2) {
    padding-right: 0;
  }
  section.contact form [class^='col-']:nth-child(3) {
    padding: 0;
  }
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="contact">
  <section class="contact">
    <div class="container">
      <div class="row">
        <header class="section-header">
          <h2>contact</h2>
        </header>
        <div class="col-lg-10 offset-lg-1">
          <form action="" method="post">
            <div class="col-md-6">
              <div class="form-group">
                <input id="name" type="text" name="name" class="form-control" />
                <label for="name">name</label>
              </div>
              <div class="form-group">
                <input id="email" type="email" name="email" class="form-control" />
                <label for="email">email</label>
              </div>
              <div class="form-group">
                <input id="phone" type="tel" name="phone" class="form-control" />
                <label for="phone">phone</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <textarea id="message" name="message" class="form-control"></textarea>
                <label for="message">message</label>
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group">
                <button id="formsubmit" type="submit" class="btn">send</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
</div>

Answer 1

此代码似乎有效。 Fiddle Demo 修改：如果我理解正确，您需要此代码。

document.getElementById("message").rows = "10";

98.5px是准确的mundo :) 或者你可以使用一些javascript并使用这样的东西。

{{1}}