0

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

有人可以解释这里发生了什么吗？这是一些换行问题吗？

笔记：

  • 我正在使用 Bootstrap 3 CSS 文件，没有其他样式
  • 下面 2 个示例之间的唯一区别在于.form-groupdiv 的布局方式

1. 带空格的表单元素：

在此处输入图像描述

<!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.没有空格的表单元素：

在此处输入图像描述

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

3 回答 3

3

内联元素对代码中的空白很敏感。由于您的示例中有 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>
于 2013-10-10T19:36:34.923 回答
1

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

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

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

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

于 2013-10-10T19:49:49.507 回答
0

作为 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 中的自动格式化可能会使您的缩进有点混乱。

于 2014-03-11T14:43:58.383 回答