Bootstrap 4 Navbar下拉菜单项目正确

时间:2017-05-09 10:23:47

标签: php drop-down-menu bootstrap-4

如下图所示,当我点击铃铛图标时,图标右下方会出现一个下拉菜单。我希望此下拉菜单显示在左下角而不是右下角。我该怎么办?

enter image description here

如果您想查看我的代码,请使用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>

7 个答案:

答案 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>

http://codeply.com/go/6Mf9aK0P8G

答案 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;

https://codepen.io/migli/pen/RELPPj

答案 5 :(得分:0)

boostrap 4几乎没有变化。 要将导航栏对齐到右侧,只需进行两项更改。 他们是:

  1. navbar-nav类中,将w-100添加为navbar-nav w-100以使宽度为100
  2. nav-item dropdown类中,将ml-auto添加为nav-item dropdown ml-auto,以使边距保留为自动。

如果您不理解,请参阅此

https://stackoverflow.com/a/58474527/10907720

答案 6 :(得分:0)

引导程序 5

@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>