如何控制Bootstrap 3中control-label的左右对齐切换时机？

这问题我之前做项目时也踩过坑！Bootstrap默认的control-label类在非移动端的水平布局里会强制右对齐，哪怕屏幕缩小到md/sm尺寸、标签已经和输入框堆叠了，这个右对齐样式还会保留，确实很影响视觉体验。不过咱们完全可以通过响应式控制实现你要的效果：lg及以上屏幕标签右对齐（和输入框并排），md及以下屏幕标签左对齐（和输入框堆叠），下面给你两种实用方案：

方案一：用Bootstrap内置响应式文本类（最简洁） #

Bootstrap从3.1版本开始就支持text-{断点}-{对齐方式}的响应式文本类，直接给label加这两个类就能搞定，不用写额外CSS：

修改你的label标签class：

<label class="col-xs-12 col-lg-5 control-label text-lg-right text-md-left">
  <required-Marker></required-Marker> Start Date:
</label>

<label class="col-xs-12 col-lg-5 control-label text-lg-right text-md-left">
  <required-Marker></required-Marker> End Date:
</label>

原理说明： #

• text-lg-right：在lg断点（≥992px）时，标签右对齐，保持你要的并排布局效果
• text-md-left：在md及以下断点（<992px）时，标签左对齐，堆叠后视觉更协调

方案二：自定义CSS媒体查询（适合全局统一调整） #

如果你的项目里有大量类似表单需要统一这个对齐规则，写一次全局CSS更高效：

/* 针对md、sm、xs屏幕（宽度<992px），强制标签左对齐 */
@media (max-width: 991.98px) {
  .control-label {
    text-align: left !important;
    margin-bottom: 0.5rem; /* 可选：给标签和输入框加一点间距，堆叠后更美观 */
  }
}

/* 针对lg及以上屏幕（宽度≥992px），保持标签右对齐 */
@media (min-width: 992px) {
  .control-label {
    text-align: right !important;
  }
}

注意点： #

• 991.98px是Bootstrap lg断点的临界值（官方建议用这个值替代992px，避免因为屏幕小数像素导致的样式跳变）
• 加!important是为了覆盖Bootstrap默认的control-label样式，如果你自定义CSS的优先级比Bootstrap高（比如放在Bootstrap样式之后引入），也可以不用

额外优化建议 #

你当前的代码每个form-group都套了一个row，其实可以把两个form-group放在同一个row里，减少不必要的嵌套，布局更紧凑：

<div class="row">
  <!-- 开始日期 -->
  <div class="form-group col-lg-12">
    <label class="col-xs-12 col-lg-5 control-label text-lg-right text-md-left">
      <required-Marker></required-Marker> Start Date:
    </label>
    <div class="col-xs-12 col-lg-7">
      <div class="input-group input-group-sm">
        <input type="text" id="startDate" name="startDate" max="0" min="-732" dateformat="mm/dd/yy" ng-model="vm.startDate" readonly required jqdatepicker changeMonth="true" changeYear="true" style="background-color: white; cursor: default" class="form-control" />
        <label for="startDate" class="input-group-addon clickable" id="btnStartDateIcon">
          <i class="fa fa-fw fa-calendar"></i>
        </label>
      </div>
    </div>
  </div>

  <!-- 结束日期 -->
  <div class="form-group col-lg-12">
    <label class="col-xs-12 col-lg-5 control-label text-lg-right text-md-left">
      <required-Marker></required-Marker> End Date:
    </label>
    <div class="col-xs-12 col-lg-7">
      <div class="input-group input-group-sm">
        <input type="text" id="endDate" name="endDate" max="0" min="-732" dateformat="mm/dd/yy" ng-model="vm.endDate" readonly required jqdatepicker changeMonth="true" changeYear="true" style="background-color: white; cursor: default" class="form-control" />
        <label for="endDate" class="input-group-addon clickable" id="btnEndDateIcon">
          <i class="fa fa-fw fa-calendar"></i>
        </label>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者PKD