css - Bootstrap 表单输入对齐

Question

我正在尝试使用 bootstrap 制作响应式表单。

这是我目前拥有的:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
  <form class='form-horizontal'>
    <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>
    <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>
    <div class='form-group'>
      <label class='control-label col-md-1 col-sm-1 col-xs-12' for='from'>From
          </label>
      <div class='col-lg-3 col-md-4 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 class='form-group'>
      <label class='control-label col-md-1 col-sm-1 col-xs-12' for='to'>To
          </label>
      <div class='col-lg-3 col-md-4 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 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>

一切都是我想要的，除了在中型设备(>= 992px，col-md-)或更大的设备上我希望'From'和'To'行彼此相邻，这样'To'将在“管理个人资料”按钮下方。关于如何实现这一目标的任何想法？

Answer 1

你可以像这样组合最后一个 form-group..

<div class="container-fluid">
    <form class="form-horizontal">
        <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>
        <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>
        <div class="form-group">
            <label class="control-label col-md-1 col-sm-1 col-xs-3" for="from">From
            </label>
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-9">
                <input type="date" data-format="yyyy-MM-dd" class="form-control input-lg" value="2018-01-24">
            </div>

            <label class="control-label col-md-1 col-sm-1 col-xs-3" for="to">To
            </label>
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-9">
                <input type="date" data-format="yyyy-MM-dd" class="form-control input-lg" value="2018-01-26">
            </div>
        </div>
        <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"></div>
        </div>
    </form>
</div>

https://www.codeply.com/go/FsKzmCSKdq

但是，在最后 2 个日期输入中，它们在 xs 屏幕上会太宽，因此您可能仍希望将它们堆叠到垂直列中。