Question

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

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

所以我查看了bootstrap样式表，并且没有form-vertical类的声明。

您有什么建议可以解决（或解决）这个问题吗？

Answer 1

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

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

Answer 2

您可以使用<fieldset>解决此问题并将表单类应用于它们：

<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>或任何其他容器。

形式垂直的风格

2 个答案: