Bootstrap响应式表单布局调整：中等及以上设备From/To行并排

要实现你要的效果，核心是利用Bootstrap 3的栅格系统，调整"From"和"To"区域的容器结构，让它们在中等屏幕（≥992px）及以上时共享同一行，同时对齐到目标位置。下面是修改后的完整代码，以及关键调整点的说明：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
  <form class='form-horizontal'>
    <!-- Product 行 -->
    <div class='form-group'>
      <label class='control-label col-md-1 col-sm-1 col-xs-12'>Product </label>
      <div class='col-lg-3 col-md-4 col-sm-9 col-xs-12'>
        <select class='form-control input-lg'>
          <option> Device </option>
        </select>
      </div>
      <div class='col-md-offset-1 col-sm-offset-1 col-lg-3 col-md-4 col-sm-9 col-xs-12'>
        <button type='button' class='btn btn-block btn-default btn-lg'>Manage product </button>
      </div>
    </div>
    <!-- Profile 行 -->
    <div class='form-group'>
      <label class='control-label col-md-1 col-sm-1 col-xs-12'>Profile </label>
      <div class='col-lg-3 col-md-4 col-sm-9 col-xs-12'>
        <select class='form-control input-lg'>
          <option>123 </option>
        </select>
      </div>
      <div class='col-md-offset-1 col-sm-offset-1 col-lg-3 col-md-4 col-sm-9 col-xs-12'>
        <button type='button' class='btn btn-block btn-default btn-lg'>Manage profile </button>
      </div>
    </div>
    <!-- 合并后的 From & To 行 -->
    <div class='form-group'>
      <!-- From 区域 -->
      <div class="col-md-5 col-sm-12 col-xs-12">
        <div class="row">
          <label class='control-label col-md-2 col-sm-1 col-xs-12' for='from'>From </label>
          <div class='col-md-10 col-lg-3 col-sm-9 col-xs-12'>
            <input type='date' data-format='yyyy-MM-dd' class='form-control input-lg' value='2018-01-24' />
          </div>
        </div>
      </div>
      <!-- To 区域（对齐到 Manage profile 下方） -->
      <div class="col-md-offset-1 col-md-6 col-sm-12 col-xs-12">
        <div class="row">
          <label class='control-label col-md-2 col-sm-1 col-xs-12' for='to'>To </label>
          <div class='col-md-10 col-lg-3 col-sm-9 col-xs-12'>
            <input type='date' data-format='yyyy-MM-dd' class='form-control input-lg' value='2018-01-26' />
          </div>
        </div>
      </div>
    </div>
    <!-- Load 按钮行 -->
    <div class='form-group'>
      <div class='col-md-offset-1 col-sm-offset-1 col-lg-3 col-md-4 col-sm-9 col-xs-12'>
        <button type='button' class='btn btn-block btn-primary btn-lg'>Load </button>
      </div>
    </div>
  </form>
</div>

关键调整说明： #

1. 合并Form Group：把原来独立的"From"和"To"两个form-group合并到一个新的form-group中，这样我们可以统一控制它们在大屏幕下的并排布局，小屏幕下会自动堆叠成两行。
2. 栅格列分配：
   • 给"From"区域设置col-md-5，刚好容纳原布局的col-md-1标签 + col-md-4输入框的宽度总和；
   • 给"To"区域设置col-md-offset-1 col-md-6，其中col-md-offset-1和上方"Manage profile"按钮的偏移保持一致，确保位置对齐，col-md-6足够容纳标签和输入框的宽度。
3. 内部结构适配：在每个区域内部用row包裹标签和输入框，调整标签在md屏幕下的列宽为col-md-2，输入框为col-md-10，保证和原布局的视觉比例一致，同时小屏幕下自动切换为原有的堆叠样式。

这样修改后，在中等及更大屏幕上，"From"和"To"就会并排显示，且"To"区域正好位于"Manage profile"按钮的下方，小屏幕下依然保持原有的垂直布局，完全符合你的需求。

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