我试图使用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>
&#13;
一切都是我想要的,除了在中型设备(&gt; = 992px,col-md-)或更大的设备上,我希望&#39; From&#39;和&#39; To&#39;彼此相邻的行,以便&#39; To&#39;将在&#39;管理个人资料&#39;按钮。关于如何实现这一点的任何想法?
答案 0 :(得分: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
屏幕上会过宽,因此您可能仍希望将它们叠加到垂直列中。