bootstrap-vue 示例中的 b-nav-form 未正确呈现答案

【问题标题】：b-nav-form in bootstrap-vue example not rendering correctlybootstrap-vue 示例中的 b-nav-form 未正确呈现
【发布时间】：2018-08-13 21:10:10
【问题描述】：

文档here 中的导航栏示例包括嵌入导航栏中的<b-nav-form> 部分，其中包含<b-form-input> 和<b-button>。但是当我尝试在我自己的页面中使用该示例时，只有输入框可见（它在按钮的顶部——如果我删除<b-form-input>，我可以看到按钮）。我有一个问题的 jsfiddle 示例here。

他们的例子是这样的：Expected Navbar

当我尝试使用它时，它最终看起来像这样：Resulting Navbar

这是我使用的库/css 版本的问题吗？（目前最新的：bootstrap 4.0.0、bootstrap-vue 2.0.0-rc.1、vue 2.5.13，我已经尝试了一些早期的组合。）我不知道哪些版本的库bootstrap-vue.js.org 正在使用。

【问题讨论】：

标签： twitter-bootstrap vue.js bootstrap-vue

【解决方案1】：

试试这个：

<b-nav-form> <b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input> <b-button class="my-2 my-sm-0" type="submit">Search</b-button> </b-nav-form>

【讨论】：

也许，您应该考虑添加几行来突出您的建议为何有效和/或与原始帖子的差异在哪里。
有趣...将<b-form-input .../> 更改为<b-form-input ...></b-form-input> 使其工作。（Ciradil 的回答还删除了 size="sm" 属性。但它是打开/关闭标签而不是自动关闭标签的更改。）