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

Question

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

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

文本框和按钮之间没有装订线。任何人都可以告诉我这个原因。

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吗？

Answer 2

使用bootstrap 3.3.6代码运行正常。有一个排水沟。你用的是哪个版本？

请使用浏览器中的开发工具检查另一个css类是否覆盖了bootstrap的css。