形式-垂直样式答案

【问题标题】：form-vertical style形式-垂直样式
【发布时间】：2012-10-13 16:21:00
【问题描述】：

我在我的项目中使用twitter-bootstrap，您可能知道默认的表单对齐方式是垂直的，因此标签显示在表单字段上方。您可以添加类 form-horizontal 以在表单字段旁边显示标签。

我正在构建一个水平显示的表单，但我希望我的表单子集垂直对齐。所以我将form-vertical 类添加到该部分，但它并没有改变任何东西。

所以我查看了引导样式表，没有声明 form-vertical 类。

您对解决（或变通）这个问题有什么建议吗？

【问题讨论】：

不是默认“垂直”吗？

标签： html css twitter-bootstrap

【解决方案1】：

我在 github 上开了一个ticket。我在自定义样式表中实现了所需的 CSS：

.form-vertical .control-label {
  float: none;
  padding-top: inherit;
  text-align: inherit;
  width: auto;
}
.form-vertical .controls {
  margin-left: inherit;
}

【讨论】：

【解决方案2】：

您也许可以使用<fieldset>s 解决这个问题，并将表单类应用于它们，如下所示：

<form class="form">
   <!-- vertical fieldset, no extra class needed -->
   <fieldset>
      <legend>Vertical fieldset</legend>
      [ add your form elements ] 
   </fieldset>
   <!-- horizontal fieldset with the extra class -->
   <fieldset class="form-horizontal">
      <legend>Horizontal fieldset</legend>
      [ add your form elements ] 
   </fieldset>
</form>

也应该与<div>s 或任何其他容器一起使用。

【讨论】：

我可以解决这个问题，但我更容易实现缺少的 form-vertical 类。我现在不需要将表单分成多个字段集。但它喜欢它的想法。