作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想要一个在第一级有水平布局的表单,但是在一行内可以有一个表单“内联”,我想要一个垂直(默认)布局。有没有简单的方法来实现这一目标?
注: .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 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;
}
<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>
关于forms - 带有 Twitter Bootstrap 的 form-horizontal 中的普通(垂直)表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13596253/
我是一名优秀的程序员,十分优秀!