我有这个HTML引导程序表格。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form method="POST" action="reportGenerator.php" class="form-inline">
<div class="input-group">
<input type="text" id="From" class="form-control" name="From" placeholder="Date From">
<input type="text" id="To" class="form-control" name="To" placeholder="Date To">
<select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown">
<OPTION>Sale</OPTION>
<OPTION>Purchase</OPTION>
</select>
<span class="input-group-btn">
<input class="btn btn-default" type="submit" value="Generate Report" />
</span>
</div>
</form>
</div>
</div>
输出有点奇怪,我喜欢
但是我想做的是将所有这些都精确地设置为一行。是否有任何引导程序类可以做到这一点?
只需使用此代码代替您的代码即可。.在引导程序中,有一个名为Col-lg-n,col-md-n。的类。这会将屏幕划分为n列。最大n值为12。代码
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
<div class="container">
<div class="row">
<form method="POST" action="reportGenerator.php" class="form-inline">
<div class="input-group">
<div class="col-lg-3 col-md-3">
<input type="text" id="From" class="form-control" name="From" placeholder="Date From">
</div>
<div class="col-lg-3 col-md-3">
<input type="text" id="To" class="form-control" name="To" placeholder="Date To">
</div>
<div class="col-lg-3 col-md-3">
<select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown">
<OPTION>Sale</OPTION>
<OPTION>Purchase</OPTION>
</select>
</div>
<div class="col-lg-3 col-md-3">
<span class="input-group-btn">
<input class="btn btn-default" type="submit" value="Generate Report" />
</span>
</div>
</div>
</form>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句