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

【问题标题】：Bootstrap 3 remove space between inline inputsBootstrap 3删除内联输入之间的空间
【发布时间】：2014-01-11 06:25:06
【问题描述】：

我正在做一个简单的内联表单。如何调整每个输入表单之间的空格？我想让输入基本接触。

    <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>

【问题讨论】：

标签： forms twitter-bootstrap-3 inline

【解决方案1】：

间距是由 Bootstrap 固有的网格列之间的填充引起的。如果您希望表单元素相互对接（左右），您可以浮动容器 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;
}

【讨论】：