输入元素没有边距 (Bootstrap)

Question

我创建了一个 Fiddle 我的问题（但是在 Fiddle 中它显示正确）。

如您所见，我有一个包含 4 个输入的表单。每当我在 Webstorm 上执行此操作时，网站都会显示在 chrome 中，但所有输入都没有余量（没有 space）。我将我的代码复制到 jsfiddle，它看起来是正确的。我想知道我是否在 webstorm 中出错，或者这可能是 bootstrap 内的错误？这是一张正常的照片：

编辑（HTML 代码）

 <body>
  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed">
          <span class="sr-only">Toggle</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">LearnYou</a>
      </div>
      <div class="navbar-collapse collapse">
        <form class="navbar-form navbar-right">
          <div class="form-group">
            <input type="text" placeholder="Email" class="form-control">
          </div>
          <div class="form-group">
            <input type="password" placeholder="Password" class="form-control">
          </div>
          <div class="form-group">
            <input type="submit" value="Sign in" class="btn btn-success ">
          </div>
          <div class="form-group">
            <input type="button" value="Sign up" class="btn btn-success ">
          </div>
        </form>
      </div>
    </div>
  </nav>
</body>

编辑 2：看起来问题来自 "Jade"，每当我执行简单的 html5 时，它都会正确呈现，但是当我使用 Jade 时，它会显示 wrong.Any 想法？这是我的 Jade 代码：

 nav(class="navbar navbar-inverse")
        div(class="container")
            div(class="navbar-header")
                button(type="button" ,class="navbar-toggle collapsed" ,data-toggle="collapse", data-target="#navbar", aria-expanded="false" ,aria-controls="navbar")
                    span(class="sr-only") Toggle
                    span(class="icon-bar")
                    span(class="icon-bar")
                    span(class="icon-bar")
                a(class="navbar-brand" ,href="#") LearnYou
            div(id="navbar",class="navbar-collapse collapse")
                form(class="navbar-form navbar-right", role="form")
                    div(class="form-group")
                      input(type="text", placeholder="Email", class="form-control")
                    div(class="form-group")
                      input(type="password", placeholder="Password", class="form-control")
                    input(type="submit", class="btn btn-success" ,value="Sign in")
                    input(type="button", class="btn btn-success", value="Sign up")

Answer 1

.form-group {
  margin-left:10px;
}

Answer 2

要应用保证金，您可以使用 mx class

<div class="form-group mx-2">
   <input type="text" placeholder="Email" class="form-control">
</div>

同时使用左右边距或者你可以使用mr-2（右边距）和ml-2（左边距)

Answer 3

Bootstrap v5 放弃特定于表单的布局类以支持现有的网格和实用程序类。在 v5 中使用遗留类将不再产生以前版本的预期样式——例如 form-group 边距。有关详细信息，请参阅 Migration To v5 指南中的表单部分。

v5 form examples 现在使用保证金实用程序类，这应该会产生预期的结果。这些类应该提供一个简单的解决方案，无需自定义样式规则。

示例：

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  ...
</form>

输入元素没有边距 (Bootstrap)

Input Elements have no margin (Bootstrap)

html

css

twitter-bootstrap

pug