html - 在 css-grid 框之一内对齐输入框

Question

我创建了一个 css 网格布局，它将一个容器分成两半。一侧大概是我的联系表，另一侧是文本。现在，我已经开始在特定的 <div> 中添加一个 bootstrap 3.x 输入框。包含左侧框所有内容的标签。由于某种原因，输入框出现在左侧框下方，而不是内部，并且减小了框的垂直尺寸(应该一直延伸到图像底部)。我对框进行了颜色编码以表示问题:

我不确定该怎么做，我想在左边的框中包含一个完整的表格。下面是这个特定容器的整个 html 和 css。可能是什么问题？

HTML:

<section class="contact-container" id="contact">
    <div class="box contact-box-left"></div>
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1">
    </div>
    <div class="box contact-box-right"></div>
  </section>

CSS:

/* ======= CONTACT ======= */

.contact-container {
  height: 50vh;
  background-color: #484747;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.contact-box-left {
  background-color: pink;
  grid-column: 1;
  grid-row: 1 / 3;
}

.contact-box-right {
  background-color: green;
  grid-column: 2;
  grid-row: 1 / 3;
}

感谢您的帮助。

更新:

为了让事情更简单，这里是 jsfiddle:https://jsfiddle.net/7ajhcovg/

Answer 1

你的 div.input-group 完全在 div.contact-box-left 之外

只需将 .input-group 移动到正确的 div 中即可。

<section class="contact-container" id="contact">
  <div class="box contact-box-left">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1">
    </div>
  </div>
  <div class="box contact-box-right"></div>
</section>

https://jsfiddle.net/7ajhcovg/1/