Javascript 当某些标签跨越多行时，如何垂直对齐表单控件？

使用Bootstrap3，我有一个水平表单，在控件顶部有标签。当其中一个标签太长时，文本将换行到下一行（这很好）。但是，这会将输入框向下移动（参见下文）。如何将其他输入垂直对齐，使其看起来不奇怪

例如：

<div class="form-group">
  <div class="row">
    <div class="col-sm-6">
      <label for="one">Label one</label>
      <input type="text" id="one" class="form-control">
    </div>
    <div class="col-sm-6">
      <label for="two">Label two is a very long label that will span at least two lines and shift the input box down a bit and make this form look really weird. How do I fix this?</label>
      <input type="text" id="two" class="form-control">
    </div>
  </div>
</div>

标签一
标签2是一个非常长的标签，它将至少跨越两行，并将输入框向下移动一点，使此表单看起来非常奇怪。我该如何解决这个问题？

这看起来像这样：

但我希望它看起来像这样：

---

这里有一个JSFIDLE示例：

使用它会是一个好主意吗？我去掉了一些元素，使示例更清晰

div.form-group{
显示：网格；
网格模板列：自动；
网格模板行：自动；
}
.g1{
网格柱：1；
网格行：1；
}
.g2{
网格柱：1；
网格行：2；
}
.g3{
网格柱：2；
网格行：1；
}
.g4{
网格柱：2；
网格行：2；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.g3{
网格柱：1；
网格行：3；
}
.g4{
网格柱：1；
网格行：4；
}
}

标签一
标签2是一个非常长的标签，它将至少跨越两行，并将输入框向下移动一点，使此表单看起来非常奇怪。我该如何解决这个问题？

这是个好主意吗？我去掉了一些元素，使示例更清晰

div.form-group{
显示：网格；
网格模板列：自动；
网格模板行：自动；
}
.g1{
网格柱：1；
网格行：1；
}
.g2{
网格柱：1；
网格行：2；
}
.g3{
网格柱：2；
网格行：1；
}
.g4{
网格柱：2；
网格行：2；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.g3{
网格柱：1；
网格行：3；
}
.g4{
网格柱：1；
网格行：4；
}
}

标签一
标签2是一个非常长的标签，它将至少跨越两行，并将输入框向下移动一点，使此表单看起来非常奇怪。我该如何解决这个问题？

您可以使用Flex使其正常工作

.row{
显示器：flex；
柔性包装：包装；
}
.输入组{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
@介质（最大宽度：768px）{
.col-sm-6{
宽度：100%；
}
}

标签一
标签2是一个非常长的标签，至少会跨越两行
将输入框向下移动一点，使这个表单看起来真实
奇怪的我该如何解决这个问题？

您可以使用Flex使其正常工作

.row{
显示器：flex；
柔性包装：包装；
}
.输入组{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
@介质（最大宽度：768px）{
.col-sm-6{
宽度：100%；
}
}

标签一
标签2是一个非常长的标签，至少会跨越两行
将输入框向下移动一点，使这个表单看起来真实
奇怪的我该如何解决这个问题？

您可以使用

调整内容：间距

，但您需要指定

显示：弹性

并制作一个

弹性方向：列

。因为bootstrap3中没有预构建的类。您应该在CSS文件中执行此操作

.row{
显示器：flex；
}
第一上校{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}

标签一
标签2是一个非常长的标签，它将至少跨越两行，并将输入框向下移动一点，使此表单看起来非常奇怪。我该如何解决这个问题？

您可以使用

调整内容：间距

，但您需要指定

显示：弹性

并制作一个

弹性方向：列

。因为bootstrap3中没有预构建的类。您应该在CSS文件中执行此操作

.row{
显示器：flex；
}
第一上校{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}

标签一
标签2是一个非常长的标签，它将至少跨越两行，并将输入框向下移动一点，使此表单看起来非常奇怪。我该如何解决这个问题？

这接近我想要的，但它不再使用引导列，也不再响应。i、 e.当调整到移动大小时，各列保持相邻。@RatTub如果您需要响应性设计，您可以将一列中的元素对齐（网格）@RatTub这两个示例使用CSS媒体查询进行更新。谢谢，媒体查询帮助很大！这接近我想要的，但它不再使用引导列，也不再响应。i、 e.当调整到移动大小时，各列保持相邻。@RatTub如果您需要响应性设计，您可以将一列中的元素对齐（网格）@RatTub这两个示例使用CSS媒体查询进行更新。谢谢，媒体查询帮助很大！在bootstrap 4中回答可以吗？在bootstrap 4中回答可以吗？我接受了chrwahl的答案，但这一个也极大地帮助了我。谢谢我接受了chrwahl的回答，但这个回答也帮了我很大的忙。谢谢