形式 – 正式(垂直)形式内部的形式水平与Twitter Bootstrap

发布时间：2020-12-18 00:16:40 所属栏目：安全来源：网络整理

导读：我想要一个在第一级有一个水平布局的表单,但是在一行中可以有一个表单“内联”,我想要一个垂直(默认)布局.有没有办法实现这一点？注意：.form-inline不会做我正在寻找的内容,因为它不会将内部标签放在输入的顶部. 到目前为止我有这样的事情： div class="fo

我想要一个在第一级有一个水平布局的表单,但是在一行中可以有一个表单“内联”,我想要一个垂直(默认)布局.有没有办法实现这一点？

注意：.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无法执行此操作,但我已将其包含在我的叉子 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!