如下图所示,当我点击铃铛图标时,图标右下方会出现一个下拉菜单。我希望此下拉菜单显示在左下角而不是右下角。我该怎么办?
如果您想查看我的代码,请使用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文件中回显:
<nav class="navbar">
<div class="container">
<div class="navbar-nav d-flex flex-row">
<?= navigation() ?>
</div>
</div>
</nav>
答案 0 :(得分:30)
使用dropdown-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>
答案 1 :(得分:16)
Bootstrap4-Beta更新:
因为我需要添加bug in bootstrap4 beta
.dropdown-menu-right {
right: 0;
left: auto;
}
让它发挥作用。
答案 2 :(得分:3)
类如果在
.dropdown-menu-right
内有不同的行为。你可以阅读&#34; Heads up&#34;在这里的文档:
https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
实际上要解决我使用这个类:
.navbar
答案 3 :(得分:1)
我通过添加 dir =“ rtl”
<div class="dropdown-menu " dir="rtl" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item " href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
答案 4 :(得分:0)
我遇到了同样的问题,因为我的菜单是用PHP创建的-元素的数量和下拉内容的数量不固定。
这是一个解决方案,可以尽可能使下拉列表居中,否则将其左右对齐以防止它们超出视口:
var $maxWidthElement = $('.navbar'),
maxWidth = $maxWidthElement.width();
var positionDropdowns = function() {
$('.dropdown-menu').each(function() {
var $navItem = $(this).closest('.dropdown'),
dropdownWidth = $(this).outerWidth(),
dropdownOffsetLeft = $navItem.offset().left,
dropdownOffsetRight = maxWidth - (dropdownOffsetLeft + dropdownWidth),
linkCenterOffsetLeft = dropdownOffsetLeft + $navItem.outerWidth() / 2;
if ((linkCenterOffsetLeft - dropdownWidth / 2 > 0) & (linkCenterOffsetLeft + dropdownWidth / 2 < maxWidth)) {
// center the dropdown menu if possible
$(this).css('left', -(dropdownWidth / 2 - $navItem.outerWidth() / 2));
} else if ((dropdownOffsetRight < 0) & (dropdownWidth < dropdownOffsetLeft + $navItem.outerWidth())) {
// set the dropdown menu to left if it exceeds the viewport on the right
$(this).addClass('dropdown-menu-right');
} else if (dropdownOffsetLeft + dropdownWidth > maxWidth) {
// full width if the dropdown is too large to fit on the right
$(this).css({
left: 0,
right: 0,
width:
$(this)
.closest('.container')
.width() + 'px'
});
}
});
};
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
maxWidth = $maxWidthElement.width();
positionDropdowns();
}, 250);
});
positionDropdowns();
window.onresize = positionDropdowns;
答案 5 :(得分:0)
boostrap 4几乎没有变化。 要将导航栏对齐到右侧,只需进行两项更改。 他们是:
navbar-nav
类中,将w-100
添加为navbar-nav w-100
以使宽度为100 nav-item dropdown
类中,将ml-auto
添加为nav-item dropdown ml-auto
,以使边距保留为自动。如果您不理解,请参阅此
答案 6 :(得分:0)
@Zim 的回答可能是最正确的as suggested in the docs。
尽管如此,我设法使其工作的唯一方法是改用 end-0
类。
<ul class="dropdown-menu end-0">
<li><a class="dropdown-item" href="#">Save</a></li>
<li><a class="dropdown-item" href="#">Fetch</a></li>
</ul>