这个空间从哪里来？

克拉默65

我正在使用Bootstrap来构建我的网站，现在我试图在一行上获得许多表单输入。为此，我使用覆盖了输入填充

.padding-one {
    padding-right: 1px;
    padding-left: 1px;
}

表单右侧的html应该包含两个小图标，我为此保留了一些空间：

<div class="col-sm-2 padding-one">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">€</div>
            <input class="form-control" type="text">
        </div>
    </div>
</div>
<div class="col-sm-1 padding-one">
    <div class="row">
        <div class="col-xs-6 padding-one">
            icon1
        </div>
        <div class="col-xs-6 padding-one">
            icon2
        </div>
    </div>
</div>

但是，这导致以下结果：

这两个问号已经表明了我的惊讶：

为什么第一个文本（“ icon1”）在上一个输入下部分消失？
“ icon1”和“ icon2”之间的空间从何而来？

有人知道我该如何解决吗？

伊万卡·托多罗娃（Ivanka Todorova）

为什么第一个文本（“ icon1”）在上一个输入下部分消失？

如果您通过Bootstrap的CSS，则会看到每个col- *都有一个padding。您的CSS定义会覆盖默认填充，导致网格无法正常工作。

与其覆盖填充，不如查看Forms Docs @ Bootstrap。内联表单的框架有一个特殊的实现。

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

“ icon1”和“ icon2”之间的空间从何而来？

首先，您.col-sm-1可以说200px里面有2x。col-x-6这将划分那些200px（示例），每个div的宽度为100px。如果文本“ icon1”和“ icon2”50px各占一半div，这就是为什么在“ icon1”和“ icon2”之间留有空格。即使您已覆盖默认值padding。