现在我正在使用bootstrap 3输入组,但结果并不像期望。我想在一行中选择[输入] - [输入文本] - [按钮]。但在我的情况下按钮有像这个Input Group SS里面的白色空间。这是我的代码:
<div class="card-block bg-white">
<div class="row">
<form action="<?php echo base_url(); ?>performance" method="post">
<div class="form-group">
<div class="input-group col-md-6 col-md-offset-4 col-sm-12 col-xs-12">
<span class="input-group-btn">
<select class="form-control input-sm" name="id_cabang" id="id_cabang">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</span>
<span class="input-group-btn">
<input id="bulan_kinerja" name="bulan_kinerja" type="text" class="form-control input-sm bln_picker" data-provide="datepicker" placeholder="Datepicker" value="<?php echo $bulan_kinerja; ?>"/>
</span>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-sm" id="kinerja_btn">Submit</button>
</span>
</div>
</div>
</form>
</div>
</div>
我在谷歌尝试了一些例子,但有些情况下,如果屏幕宽度变小,则转向新行。
我希望结果充满响应宽度和纯使用bootstrap 3类。请帮忙。非常感谢。
您必须使用包含BootStrap CSS样式表
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<div class="card-block bg-white">
<div class="row">
<form action="<?php echo base_url(); ?>performance" method="post">
<div class="form-group">
<div class="input-group col-md-6 col-md-offset-4 col-sm-12 col-xs-12">
<span class="input-group-btn">
<select class="form-control input-sm" name="id_cabang" id="id_cabang">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</span>
<span class="input-group-btn">
<input id="bulan_kinerja" name="bulan_kinerja" type="text" class="form-control input-sm bln_picker" data-provide="datepicker" placeholder="Datepicker" value="<?php echo $bulan_kinerja; ?>"/>
</span>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-sm" id="kinerja_btn">Submit</button>
</span>
</div>
</div>
</form>
</div>
</div>
您应该始终使用最新版本。了解如何迁移到v4 here。