Question

这个间距问题让我发疯。我终于想通了，为了在表单元素之间有空格，我需要格式化我的HTML代码，如下所示。

有人能解释一下这里发生了什么吗？这是一个换行问题吗？

注意：

我正在使用Bootstrap 3 CSS文件，没有其他样式
以下2个样本之间的唯一区别在于.form-group div的布局方式

1。带空格的表单元素：

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <title>Elements with spaces</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
      </div>
      <div class="form-group">
        <input type="password" class="form-control" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>
  </body>
</html>

2。表单元素没有空格：

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <title>Elements with spaces</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
      </div><div class="form-group">
        <input type="password" class="form-control" placeholder="Password">
      </div><button type="submit" class="btn btn-default">Sign in</button>
    </form>
  </body>
</html>

Answer 1

内联元素对代码中的空白区域很敏感。由于您的示例中的div通常是块级元素，但它们并排出现，因此您的CSS很可能会将它们更改为内联显示。您还可以使用HTML注释消除差距。

<div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
  </div><!--
  --><div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
</div>

Answer 2

根据Bootstrap文档（http://getbootstrap.com/css/#forms-inline），form-group用于包裹form-control，因此您的第二种方法更好。

您的第一个示例是按预期呈现，因为Bootstrap CSS设置inline-block并且form-control本身没有边距。您可以通过在CSS中使用margin来覆盖此行为。

.form-inline .form-control {
  display: inline-block;
  margin-right:4px;
}

演示：http://bootply.com/86947

Answer 3

作为j08691答案的替代方法，这是我用来防止空格的方法：

<div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
</div
><div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
</div>

您不会引入不必要的注释，但在某些IDE中自动格式化可能会使您的缩进陷入困境。

你如何解释这个div间距问题？

3 个答案: