在其中一个 css-grid 框内对齐输入框答案

【问题标题】：Aligning a input box inside one of the css-grid boxes在其中一个 css-grid 框内对齐输入框
【发布时间】：2018-01-23 19:49:54
【问题描述】：

我创建了一个 CSS 网格布局，它将一个容器分成两半。一侧可能是我的联系表格，另一侧是文本。现在，我已着手在包含左侧框所有内容的特定 <div> 标记内添加一个引导 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/

【问题讨论】：

标签： html css twitter-bootstrap-3 css-grid

【解决方案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/

【讨论】：