这是一个令人沮丧的令人毛骨悚然的问题，因为我正在将代码从Bootstrap 3转换为4。导航栏在右侧带有按钮组（用户名，登录选项等）
当按钮组不是导航栏的一部分时（菜单中未包括该菜单项）–我有下面未显示的PHP代码，用于检查特定页面是否显示菜单（导航栏），下拉列表显示正确-垂直等。但是，如果我将按钮组放在导航栏中，则下拉列表变为水平。
我确定这是因为某些代码以某种方式干扰了其他部分，但我无法弄清楚。删除PHP代码，仅显示Bootstrap 4的HTML，这就是我所拥有的-首先是不带导航栏的按钮组：
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">hirsch</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
该代码将按预期显示。但是，如果我在导航栏的折叠部分的末尾之前插入此字符（或者如果我将其放在后面，则似乎没有关系），而是水平显示，这很奇怪……
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="">Who's Who</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Disclaimer/Copyright</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul> <!-- / navbar-nav -->
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">UserName</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
</div> <!-- / collapse -->
</nav>
如果已设置了Bootstrap 4的其余部分，则应该能够复制并粘贴代码示例并查看它们。单击按钮组上的下箭头符号，在第一个示例中它是垂直的，在第二个示例中它是水平的，但这是完全相同的代码。我真的很困惑，问题出在哪里，我已经盯着这个看了很长时间了，却找不到问题所在。
答案 0 :(得分：0)
事实证明Dropdown有所改变，而不是使用UL标签，例如：
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
它可以更好地（更简单）地使用：
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<a class="dropdown-item" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
<a class="dropdown-item" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
<a class="dropdown-item" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</div>