使用Twitter Bootstrap在形式水平内的正常(垂直)形式

时间:2012-11-28 01:23:39

标签: forms twitter-bootstrap

我想有一个在第一层有水平布局的表单,但是在一行内可以有一个“内联”表单,我想要一个垂直(默认)布局。有没有一种简单的方法来实现这一目标?

注意: .form-inline没有做我正在寻找的事情,因为它没有将内部标签放在输入的顶部。

到目前为止,我有这样的事情:

<div class="form-horizontal">
    <div class="control-group">
        <label class="control-label">
           outer label
        </label>
        <div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###">
            ### INLINE FORM WITH SAME STRUCTURE IS HERE ###
        </div>
    </div>
</div>

4 个答案:

答案 0 :(得分:8)

Boostrap默认情况下无法执行此操作,但我已将其包含在我的前叉中https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40

请考虑使用Jasny对Bootstrap http://jasny.github.com/bootstrap

的扩展

或只使用此CSS

.form-vertical .form-horizontal .control-group > label {
  text-align: left;
}
.form-horizontal .form-vertical .control-group > label {
  float: none;
  padding-top: 0;
  text-align: left;
}
.form-horizontal .form-vertical .controls {
  margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
  padding-left: 20px;
}
.control-group .control-group {
  margin-bottom: 0;
}

使用HTML

<form class="form-horizonal">
    # Horizal controls here

    <div class="form-vertical">
        <div class="control-group">
            <label class="control-label">Label</label>
            <div class="controls">Something here</div>
        </div>
    </div>
</form>

答案 1 :(得分:0)

这是针对Boostrap 3的@ jasny-arnold-daniels CSS更新.3 form-group 取代 control-group form-control 替换控制。还需要@ user9645的宽度更改。新的CSS是:

.form-vertical .form-horizontal .form-group > label {
  text-align: left;
}
.form-horizontal .form-vertical .form-group > label {
  float: none;
  padding-top: 0;
  text-align: left;
  width: 100%
}
.form-horizontal .form-vertical .form-control {
  margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
  padding-left: 20px;
}
.form-group .form-group {
  margin-bottom: 0;
}

答案 2 :(得分:0)

您不需要为Bootstrap 3编写自定义CSS。而不是将您的 form-horizo​​ntal 类放在表单标记上,只需在表单元素周围放置一个包含该类的包装div想要水平(并支持水平项目的列大小类)。

例如,这可行:

<form>
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">I'm a horizontal form element</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
      </div>
    </div>
  </div>

  <div class="form-group">
    <label>I'm a vertical form element</label>
    <input type="text" class="form-control">
  </div>
</form>

这是有效的,因为垂直表单自动用于没有明确说明类的表单。缺乏课程&#39;可以在文档here中看到。

答案 3 :(得分:-2)

我不确定你到底在寻找什么,但我试着猜测。

我创建了一个带有两条垂直线的表单,第二行包含多个表单元素。

我使用inline-block来做到这一点。

http://jsbin.com/icoduh/1/edit