title: Bootstrap 4 Navbar, Button Group right, dropdown menu not vertical
body: <p>This is a weird frustrating issue, as I'm working on converting code from Bootstrap 3 to 4. Navbar with a button group on the right (user name, login options, etc.)</p>
  
  <p>When the button group is not a part of the navbar (not included in the menu -- I have PHP code that is not shown below that checks for a specific page if the menu (navbar) is to be displayed or not, the dropdown list appears correct -- vertical, etc. If, however, I place the button group in the navbar, the dropdown list goes horizontal. </p>
  
  <p>I am sure this is because some of the code is somehow interfering with other parts, but I cannot figure it out. Stripping out the PHP code, and just showing the HTML for Bootstrap 4, this is what I have -- first with button group without the navbar:</p>
  
  <pre><code>  &lt;nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;"&gt;
       &lt;div class="btn-group" role="group"&gt;
          &lt;button type="button" class="btn btn-default"&gt;hirsch&lt;/button&gt;
          &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
             &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="dropdown-menu dropdown-menu-right" style="width: 200px;"&gt;
             &lt;ul class="navbar-nav"&gt;
                &lt;li class="nav-item"&gt;
                   &lt;a class="nav-link" href=""&gt;&amp;nbsp;&lt;i class="fa fa-key" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;Change Password&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;&lt;a class="nav-link" href=""&gt;&amp;nbsp;&lt;i class="fa fa-user" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;Manage User ID&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;&lt;a class="nav-link" href=""&gt;&amp;nbsp;&lt;i class="fa fa-sign-out" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;Logout&lt;/a&gt;
                &lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt; &lt;!-- / dropdown-menu --&gt;
       &lt;/div&gt; &lt;!-- / btn-group --&gt;
    &lt;/nav&gt;  &lt;!-- / navbar-right --&gt; 
  </code></pre>
  
  <p>That code displays as expected. If, however, I insert this before the end of the collapse part of the navbar (or if I put it after, it doesn't seem to matter), it displays horizontally instead, which is ... weird:</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
                &lt;ul class="navbar-nav mr-auto"&gt;
  
                    &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link" href=""&gt;Home&lt;/a&gt;
                   &lt;/li&gt;
  
                   &lt;li class="nav-item" &gt;
                      &lt;a class="nav-link" href=""&gt;Who's Who&lt;/a&gt;
                   &lt;/li&gt;
  
                   &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href=""&gt;Disclaimer/Copyright&lt;/a&gt;
                   &lt;/li&gt;
  
                   &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href=""&gt;Contact Us&lt;/a&gt;
                   &lt;/li&gt;
  
                &lt;/ul&gt; &lt;!-- / navbar-nav --&gt;
  
  &lt;nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;"&gt;
       &lt;div class="btn-group" role="group"&gt;
          &lt;button type="button" class="btn btn-default"&gt;UserName&lt;/button&gt;
          &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
             &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="dropdown-menu dropdown-menu-right" style="width: 200px;"&gt;
             &lt;ul class="navbar-nav"&gt;
                &lt;li class="nav-item"&gt;
                   &lt;a class="nav-link" href=""&gt;&amp;nbsp;&lt;i class="fa fa-key" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;Change Password&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;&lt;a class="nav-link" href=""&gt;&amp;nbsp;&lt;i class="fa fa-user" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;Manage User ID&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;&lt;a class="nav-link" href=""&gt;&amp;nbsp;&lt;i class="fa fa-sign-out" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;Logout&lt;/a&gt;
                &lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt; &lt;!-- / dropdown-menu --&gt;
       &lt;/div&gt; &lt;!-- / btn-group --&gt;
    &lt;/nav&gt;  &lt;!-- / navbar-right --&gt; 
  
   &lt;/div&gt; &lt;!-- / collapse --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>You should be able to copy and paste the code samples and see them if you have the rest of Bootstrap 4 set up. Click the down-caret symbol on the button group, in the first example it is vertical, in the second it is horizontal, but it's the exact same code. I am really confused where the issue is, I've been staring at this for quite some time and cannot find the problem. </p>