我需要制作一个分为两部分的表单页面:左边是特定颜色的一列，右边是另一列白色。这两部分包含在一个容器类中。表单需要以标签在彩色列中的方式对齐，而右侧的输入在白色列中。
当我需要水平对齐任一侧的标签和输入时，就会出现问题。我见过的所有水平对齐选项都要求标签和输入位于同一分区或列中，但我不能这样做，因为我需要设计具有两个独立的部分，并且标签和输入要对齐两者之间的分界线(并相应地缩放)。
我该如何处理？尝试使用包含标签列 (col-sm-4) 和输入列 (col-sm-8) 的选项，但标签并未以这种方式与输入水平对齐。
A mock-up of what I imagine it to look like. 添加随机颜色以便于理解。粉红色框是带有标签的左侧列，白色框是输入列。这两个框/列相交的线是标签和输入需要对齐的线，这就是为什么我不能只将背景设为一些颜色|白色。缩放时需要对齐。此外，当窗口太小时(例如电话屏幕)，该列应该需要垂直对齐，因此标签一个成为上面的而输入一个在下面，这是需要某种网格的另一个原因/列。
抱歉，我有代码，但目前无法正常工作，所以我希望这张图片能对您有所帮助。
谢谢!
最佳答案
更新!
我想出来了，而不是两个包含标签和输入的大列，我有两个列彼此相邻的行，一个包含标签，另一个包含输入。将这些行堆叠在一起，因此它们看起来像两个大柱并且仍然以正确的方式对齐。 所以像这样的东西，在一个容器中堆叠了很多次:
<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>
关于html - 表单对齐不同的列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52498557/