html - 为什么文本框和按钮之间没有间距？

Question

我在我的元素中使用 Bootstrap 。该元素使用 Jade 作为 View 引擎。我有以下代码。

extends layout

block content
    .container
        .row
            .col-md-4.col-md-offset-4
                .panel.panel-default
                    .panel-heading
                        h1.center-text Weather Application
                    .panel-body
                        form.form-inline
                            .form-group
                                label.sr-only(for="cityname") City name
                                input.form-control(type="text" placeholder="Enter City Name")
                            button.btn.btn-primary(type="submit") Add City

我不知道出于某种原因我得到的 html View 如下。

文本框和按钮之间没有间距。谁能告诉我这是什么原因。

Answer 1

对我来说，上面的 Jade 编译为:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1 class="center-text">Weather Application</h1>
        </div>
        <div class="panel-body">
          <form class="form-inline">
            <div class="form-group">
              <label for="cityname" class="sr-only">City name</label>
              <input type="text" placeholder="Enter City Name" class="form-control"/>
            </div>
            <button type="submit" class="btn btn-primary">Add City</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

最终看起来像这样:

您有任何自定义 CSS 吗？