输入元素没有边距（引导程序）答案

【问题标题】：Input Elements have no margin (Bootstrap)输入元素没有边距（引导程序）
【发布时间】：2016-04-11 12:29:03
【问题描述】：

我创建了我的问题的小提琴（但是在小提琴中它显示正确）。

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

编辑（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 时，它会显示错误。有什么想法吗？这是我的 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")

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。虽然您提供了link to an example or site，但如果链接失效，您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。

标签： html css twitter-bootstrap pug

【解决方案1】：

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

【讨论】：

你好 Gavin，这是一个解决方案，是的，但我正在寻找一个不添加外部 css 的解决方案，因为 html 在 jsfiddle 中正确呈现
如果没有看到其他样式，很难给出明确的答案。
除了导入bootstrap和jquery没有其他资源
DIV 是否像这样内联显示？ jsfiddle.net/rjf8tsbk/3</div><div class="form-group">
是的，但我没有你说的结构，但看起来完全一样

【解决方案2】：

要应用边距，您可以使用 mx 类

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

同时左右边距，也可以使用mr-2（右边距）和ml-2（左边距）

【讨论】：

【解决方案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>

【讨论】：