Question

我试图使用bootstrap创建一个响应式表单。

这就是我现在所拥有的：

＆＃13;

<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>

＆＃13;

一切都是我想要的，除了在中型设备（＆gt; = 992px，col-md-）或更大的设备上，我希望＆＃39; From＆＃39;和＆＃39; To＆＃39;彼此相邻的行，以便＆＃39; To＆＃39;将在＆＃39;管理个人资料＆＃39;按钮。关于如何实现这一点的任何想法？

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屏幕上会过宽，因此您可能仍希望将它们叠加到垂直列中。

Bootstrap表单输入对齐

1 个答案: