小编Mii*_*chi的帖子

我正在尝试使用 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
    }
  }

有没有一种方法可以教引导程序使用不同的媒体查询（例如 for @screen-md-min），而无需修改引导程序源本身，即通过在另一个具有 的 less 文件中覆盖它@import "bootstrap/less/bootstrap.less"？特别是是否有可能以一种我实际上不查询屏幕宽度而是当前列宽度的方式来执行此操作？（否则它会影响具有单列布局并且仍然水平对齐的其他表单。）或者还有其他更好的方法来实现我描述的响应行为吗？

    <div class="container-fluid">
        <form class="form-horizontal" role="form" action="#">
            <div class="col-xs-12 col-sm-6 col-md-6">
                <div class="form-group col-xs-12 col-sm-12 col-md-12">
                    <label class="control-label col-xs-12 col-sm-12 col-md-3">First name</label>
                    <div class="col-xs-12 col-sm-12 col-md-9"> …