14

我想要一个在第一级有水平布局的表单，但是在一行内可以有一个表单“内联”，我想要一个垂直（默认）布局。有没有简单的方法来实现这一目标？

注意： .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

4 回答 4

8

默认情况下，Boostrap 无法执行此操作，但我已将其包含在我的 fork 中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>
于 2012-12-10T14:27:55.597 回答
0

这是为 Boostrap 3 更新的@jasny-arnold-daniels CSS。在 3 form-group替换control-group，form-control替换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;
}
于 2015-09-02T00:01:40.677 回答
0

您不需要为 Bootstrap 3 编写自定义 CSS。不要将您的form- horizo​​ntal 类放在表单标签上，只需在您想要水平的表单元素周围放置一个带有该类的包装 div（并支持 column-size水平项目的类）。

例如，这将起作用：

<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>

这是有效的，因为垂直表单会自动用于没有明确说明类的表单。可以在此处的文档中看到“缺少课程” 。

于 2016-01-03T21:58:17.530 回答
-2

我不确定您到底在寻找什么，但我试图猜测。

我制作了一个带有两条垂直线的表单，第二行带有多个表单元素。

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

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

于 2012-12-10T14:37:53.733 回答