在 css- 网格框之一内对齐输入框

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/

在 css- 网格框之一内对齐输入框

Aligning a input box inside one of the css-grid boxes

html

css

twitter-bootstrap-3

css-grid