Bootstrap 3删除内联输入之间的空格

时间:2013-12-23 03:42:40

标签: forms twitter-bootstrap-3 inline

我正在做一个简单的内联表单。如何调整每个输入表单之间的空白区域?我想让投入基本上触及。

    <div class="row">
<form class="in-line" role="form">
<div class="col-md-3 col-md-offset-3">
    <div class="form-group">
        <input type="email" class="form-control input-lg" id="EmailInput" placeholder="Email Address">
    </div>
</div>
<div class="col-md-2">
    <div class ="form-group">
        <input type="text" class="form-control input-lg" placeholder="City">
    </div>
</div>
<div class="col-md-3">  
        <button class="btn btn-lg btn-success" type="button">Submit</button>
</form>
</div>

1 个答案:

答案 0 :(得分:3)

间距是由网格列之间的Bootstraps固有填充引起的。如果您希望表单元素相互对接(左侧和右侧),您只需浮动容器div。

http://jsfiddle.net/2n9AH/1/

HTML

<div class="row">
    <div class="formElement">
        <input type="email" class="form-control input-lg" id="EmailInput" placeholder="Email Address">
    </div>
    <div class="formElement">
        <input type="text" class="form-control input-lg" placeholder="City">
    </div>
</div>

CSS

 .formElement {
    float:left;
    width:200px;
}