title: b-nav-form won't stack with vertical navbar and instead renders horizontally
body: <p>I am trying to develop a Wiki Layout for our documentation, the issue is that when vertically orientating the nav, the inline form does not follow the vertical styling and instead renders next to the nav.</p>
  
  <pre><code>&lt;div class="border-right"&gt;
              &lt;b-navbar toggleable="md" type="light"&gt;
                  &lt;b-navbar-toggle target="nav_collapse"&gt;&lt;/b-navbar-toggle&gt;
                  &lt;b-collapse is-nav id="nav_collapse"&gt;
                      &lt;b-navbar-nav vertical class="bd-sidebar"&gt;
                          &lt;b-nav-form&gt;
                              &lt;b-form-input v-model={this.keyword} placeholder="Search by keyword..."&gt;&lt;/b-form-input&gt;
                              &lt;b-input-group-append &gt;
                                  &lt;b-btn on-click={this.clearModel} variant="secondary"&gt;Clear&lt;/b-btn&gt;
                              &lt;/b-input-group-append&gt;
                          &lt;/b-nav-form&gt;
                          &lt;WikiNavItem contents={this.availableContents} layer={0} classes={this.classes} /&gt;
                      &lt;/b-navbar-nav&gt;
                  &lt;/b-collapse&gt;
              &lt;/b-navbar&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas what I'm doing wrong?
  (I have omitted content for security reasons)
  <a href="https://i.stack.imgur.com/DiiH1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DiiH1.jpg" alt="Result of issue"></a></p>