Question

我正在使用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>

然而，这导致以下结果：

这两个问号已经表明我的意外了：

为什么第一个文字（＆＃34; icon1＆＃34;）会在之前的输入下部分消失？
＆＃34; icon1＆＃34;之间的空间在哪里？和＆＃34; icon2＆＃34;来自？

有人知道如何解决这个问题吗？

Answer 1

为什么第一个文字（“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里面有{2}。col-x-6，它会划分200px（示例）和每个div的宽度都为100px。如果文字“icon1”＆amp; “icon2”占据每个50px的{{1}}，这就是为什么“icon1”和＆amp;之间有空格的原因。 “ICON2”。即使您已覆盖默认的div。

以下是使用padding：jsfiddle.net

的示例小提琴

如果8个输入无法在视口中放入一行，则会将它们分成2行，每行4个输入。（调整HTML输出窗格的大小以查看其工作原理）。

这是为了获得更好的用户体验。

但如果您明确希望它们全部水平对齐，那么您可以执行类似的操作。（我不建议这样做，因为较小屏幕上的输入很难使用。）

以下是此方法的演示：jsfiddle.net

Answer 2

这是因为您要覆盖列的引导填充。默认的引导程序填充是必需的，因为它会在列之间增加空间。

这种风格：

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

覆盖：

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3,    .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

Answer 3

空间即将到来，因为.col-xs-6类默认它的宽度为50％。你用你的自定义css覆盖它以便你可以克服空间问题。

这个空间来自哪里？

3 个答案: