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

我在项目中使用引导程序。该项目使用玉作为视图引擎。我有以下代码。

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视图如下。

文本框和按钮之间没有装订线。谁能告诉我原因。

最佳答案

对我来说，以上的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吗？

关于html - 为什么文本框和按钮之间没有装订线？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38494216/