Question

我正在尝试使用Twitter Bootstrap（3.2.0）执行以下两列形式：

在超小（xs）屏幕上，第二列显示在第一列下方，控制标签显示在输入字段上方
在小（sm）屏幕上，两列显示在彼此旁边，控制标签显示在输入字段上方
一个中（md）屏幕，两列相互显示，控件标签与输入字段水平对齐

下面的代码（也在http://jsfiddle.net/mieckert/pfnbxbbo/）适用于一个问题：在小屏幕上，控件标签显示在其输入字段上方，但它们是右对齐的（而不是正确的左对齐）。

原因是forms.less中的引导程序根据媒体查询切换到右对齐：

form-horizontal {
  @media (min-width: @screen-sm-min) {
    .control-label {
      text-align: right;
      margin-bottom: 0;
      padding-top: (@padding-base-vertical + 1); // Default padding plus a border
    }
  }

有没有办法可以教导引导程序使用不同的媒体查询（比如@screen-md-min），而不必修改引导程序源本身，即通过将其覆盖在另一个{{1}的文件中}}？特别是可以这样做，我实际上并没有查询屏幕宽度，而是查询当前列的宽度？（否则它会影响具有单个列布局并且仍然水平对齐的其他表单。）或者是否还有其他更好的方法来实现我描述的响应行为？

@import "bootstrap/less/bootstrap.less"

Answer 1

您可以在上面的表单中为每个标签添加课程left-label，然后使用此CSS左对齐文字：

label.col-sm-12.left-label {
        text-align: left;
}

JS Fiddle here

Answer 2

我遇到了同样的问题，我想通过col-xs-12将标签显示在xs屏幕尺寸的输入上方。我想出了以下媒体查询并使用！important来覆盖引导程序应用的text-align权限：

@media (min-width: 768px) {
    label.col-xs-12 {
      text-align: left !important;
    }
}

右对齐控件标签形状水平

2 个答案: