Bootstrap 3消除内联输入之间的空间 [英] Bootstrap 3 remove space between inline inputs

问题描述

我正在做一个简单的内联表格.如何调整每个输入表单之间的空格?我希望输入基本上可以动人.

I am doing a simple inline form. How can I adjust the blank space in between each input form? I would like to have the inputs basically touching.

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

推荐答案

间距是由网格列之间的Bootstraps固有填充引起的.如果您希望表单元素相互对接(左右)，则可以浮动容器div.

The spacing is caused by Bootstraps inherent padding between grid columns. If you want the form elements to butt up against each other (left and right) you can just float container divs.

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

这篇关于Bootstrap 3消除内联输入之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！