Bootstrap 4 Элементы выпадающего меню Navbar справа
Как вы видите на рисунке ниже, когда я нажимаю на значок колокольчика, в правом нижнем углу значка появляется выпадающее меню. Я хочу, чтобы это выпадающее меню отображалось внизу слева, а не справа внизу. Что я должен делать?
Если вы хотите увидеть мой код, он написан с 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>
Решение
Использовать 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>
Другие решения
Обновление для Bootstrap4-Beta:
Потому что есть ошибка в бета-версии bootstrap4 я должен был добавить
.dropdown-menu-right {
right: 0;
left: auto;
}
чтобы это работало.
.dropdown-menu-right класс имеет другое поведение, если он находится внутри .navbar, Вы можете прочитать «Heads up» в документации здесь:
https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
На самом деле, чтобы решить, я использую этот класс:
.navbar .dropdown-menu-right {
right: 0;
left: auto;
}
Я столкнулся с той же проблемой с дополнительной трудностью, потому что мое меню создано на 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;