表格在不同列上对齐答案

【问题标题】：Form aligning over different columns表格在不同列上对齐
【发布时间】：2018-09-30 04:41:46
【问题描述】：

我需要制作一个表单页面，它分为两部分：一列在左边有某种颜色，另一列在右边。这两个部分包含在一个容器类中。表单需要对齐，标签位于彩色列中，右侧的输入位于白色列中。

当我需要水平对齐任一侧的标签和输入时，就会出现问题。我见过的所有水平对齐选项都要求标签和输入位于同一分区或列中，但我不能这样做，因为我需要设计具有两个单独的部分，并且标签和输入要对齐到两者之间的分界线（并相应地缩放）。

我该怎么办？尝试使用包含标签列 (col-sm-4) 和输入列 (col-sm-8) 的选项，但标签没有与输入水平对齐。

A mock-up of what I imagine it to look like. 添加随机颜色以方便理解。粉色框是带有标签的左列，白色框是输入列。这两个框/列相交的线是标签和输入需要对齐的线，这就是为什么我不能让背景变成一些颜色|白色。缩放时需要对齐。此外，当窗口太小时（例如电话屏幕）时，列应该垂直对齐，所以标签一个变成上面的，输入一个是向下的，这是需要某种网格的另一个原因/列。

抱歉，我有代码，但目前无法按需要工作，所以我希望图片能提供足够的帮助。

谢谢！

【问题讨论】：

能否请您向我们展示一些代码 (HTML/CSS) 以便更轻松地回答您的问题？
我可以帮忙定位东西，但我需要一张你想要的图表。
添加的图片够吗？很确定我的代码会比帮助更令人困惑。

标签： html css forms

【解决方案1】：

更新！

想通了，而不是包含标签和输入的两个大列，我有两个相邻的行，一个包含标签，另一个包含输入。将这些行相互堆叠，因此它们看起来像两个大列并且仍然以正确的方式对齐。所以像这样的东西，在一个容器中堆叠了很多次：

<div class="row">
   <div class="col-sm-4 green-bg">
        Address
   </div>
   <div class="col-sm-8 white-bg">
       <input type="text" class="form-control" id="name">
   </div>
</div>

【讨论】：