使用Twitter Bootstrap在水平窗体内的常规(垂直)窗体 [英] Normal (vertical) form inside form-horizontal with 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>

解决方案

Boostrap默认情况下无法执行此操作，但是我已将其包含在我的fork中 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>

I would like to have a form which has a horizontal layout on the first level, but then within one row there can be a form "inline" which I want to have a vertical (the default) layout. Is there an easy way to achieve this?

Note: .form-inline doesn't do what I'm looking for, as it doesn't put the inside labels on top of the inputs.

So far I have something like this:

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

解决方案

Boostrap can't do this by default, but I've included this in my fork https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40

Please consider using Jasny's extensions to Bootstrap http://jasny.github.com/bootstrap

or just use this 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;
}

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

这篇关于使用Twitter Bootstrap在水平窗体内的常规(垂直)窗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！