html - 形式-垂直样式

Question

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

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

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

您对解决（或解决）此问题有什么建议吗？

Answer 1

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

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

Answer 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 或任何其他容器一起使用。