Bootstrap 4 Navbar下拉菜单项向右 [英] Bootstrap 4 Navbar Dropdown Menu Items Right
本文介绍了Bootstrap 4 Navbar下拉菜单项向右的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如下面的图片所示,当我单击响铃图标时,该图标的右下角会出现一个下拉菜单.我希望此下拉菜单显示在左下角而不是右下角.我该怎么办?
As you see in the picture below, when I click on the bell icon, a dropdown menu appears at the bottom-right of the icon. I want this dropdown menu to appear at bottom-left instead of bottom-right. What should I do?
如果您想查看我的代码,它是用php
编写的:
If you want to see my code, it's written with php
:
function navigation(){
$output = "";
$icons = ["user","bell","envelope","commenting"];
$rows = [2,5,5,5];
for ($i=0; $i < count($icons) ; $i++) {
$output .= '<div class="dropdown">';
$output .= '<a class="nav-item nav-link" data-toggle="dropdown">';
$output .= '<i class="fa fa-'.$icons[$i].'"></i></a>';
$output .= '<div class="dropdown-menu text-right">';
for ($j=0; $j < $rows[$i] ; $j++) {
$output .= '<a href="#" class="dropdown-item">'.($j+1).'</a>';
}
$output .= '</div>';
$output .= '</div>';
}
return $output;
}
然后,此输出将在html文件中回显:
And then, this output will be echoed in an html file:
<nav class="navbar">
<div class="container">
<div class="navbar-nav d-flex flex-row">
<?= navigation() ?>
</div>
</div>
</nav>
推荐答案
使用dropdown-menu-right
类将菜单内的项目对齐..
Use the dropdown-menu-right
class to align the items inside the menu right..
<div class="dropdown-menu dropdown-menu-right text-right">
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
</div>
http://codeply.com/go/6Mf9aK0P8G
这篇关于Bootstrap 4 Navbar下拉菜单项向右的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文