Bootstrap 3输入组

问题描述 投票:-1回答:1

现在我正在使用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类。请帮忙。非常感谢。

html css3 twitter-bootstrap-3
1个回答
0
投票

您必须使用包含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

© www.soinside.com 2019 - 2024. All rights reserved.