Question

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

当我需要水平对齐两侧的标签和输入时，出现问题。我看到的用于水平对齐的所有选项都要求标签和输入位于同一分区或同一列中，但是我无法做到这一点，因为我需要设计将两个独立的部分以及标签和输入与标签对齐。两者之间的分界线（并相应缩放）。

我该如何处理？使用包括标签列（col-sm-4）和输入列（col-sm-8）的选择进行了尝试，但是标签没有以这种方式与输入水平对齐。

A mock-up of what I imagine it to look like. 添加了随机颜色以提高理解性。粉色框是带有标签的左列，而白色框是输入列。这两个框/列相交的线是标签和输入需要对齐的线，这就是为什么我不能仅将背景设置为白色。缩放时必须对齐。同样，当窗口太小（例如电话屏幕）时，列应垂直对齐，因此标签一个变为上一个，输入向下一个，这是另一个原因，需要某种网格/列。

对不起，我有代码，但是目前无法按需运行，因此我希望图像能提供足够的帮助。

谢谢！

Answer 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>

表格在不同的列上对齐

1 个答案: