html - Bootstrap 3 输入组

Question

现在我正在使用 bootstrap 3 输入组，但结果并不像预期的那样。 我想在一行中选择 [input]-[input text]-[button]。 但在我的例子中，按钮内部有这样的空白 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 类。请帮忙。非常感谢。

Answer 1

您必须使用

包含 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 .