Это странная проблема, так как я работаю над преобразованием кода из Bootstrap 3 в 4. Navbar с группой кнопок справа (имя пользователя, параметры входа и т. Д.)
Когда группа кнопок не является частью навигационной панели (не включена в меню - у меня есть код PHP, который не показан ниже, который проверяет наличие определенной страницы, должно ли меню (навигационная панель) отображаться или нет, выпадающий список выглядит правильно - вертикальный и т. д. Если, однако, я размещаю группу кнопок на панели навигации, раскрывающийся список становится горизонтальным.
Я уверен, что это потому, что какой-то код как-то мешает другим частям, но я не могу понять это. Удаляя код PHP и просто показывая HTML для Bootstrap 4, это то, что у меня есть - сначала с группой кнопок без панели навигации:
<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. Щелкните символ нижнего каретки на группе кнопок, в первом примере он вертикальный, во втором - горизонтальный, но это точно такой же код. Я действительно запутался, когда проблема, я смотрю на это в течение достаточно долгого времени и не могу найти проблему.