bootstrap 4下拉菜单导航栏用户首选项“欢迎，用户”

问题描述 投票：1回答：2

我是css和bootstrap的新手，无法弄清楚如何解决这个问题。欢迎任何帮助。

我的代码有两个问题。

1）当我在小屏幕（移动设备）中单击“欢迎，用户”菜单时，导航栏内的下拉菜单会打开，扭曲栏并更改其高度。我希望它的行为方式与大屏幕（例如桌面）相同。单击时，我希望它在不更改导航栏的情况下打开菜单项，在导航栏前面但不在内部。

2）另一个问题：即使在较大的屏幕上，我也看不到菜单项。项目的某些文本隐藏在屏幕的边缘。我希望菜单完全出现在屏幕上，无论是桌面还是移动。

为了说清楚，我录制了一个非常小的视频来证明这个问题：https://puu.sh/Bq34w/ac56908be0.mp4

完整的代码：https://jsfiddle.net/fredslz/0v7qwjdm/12/

<!doctype html>
<html lang="en">
<body class="text-center">

<nav class="navbar navbar-expand-md navbar-light fixed-top" style="background-color: #FFFFFF;">

        <button class="navbar-toggler navbar-nav mr-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span> 
        </button>

        <a class="navbar-brand mx-auto" href="#">My Brand</a>

        <ul class="nav navbar-nav ml-md--auto"> 

                <li class="dropdown"> 

                    <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false"> 
                            Welcome, User <b class="caret"></b>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                        </div>

                </li> 
        </ul>



</nav>



</body>
</html>

而CSS：

.navbar {
   -webkit-box-shadow: 0 8px 6px -6px #999;
   -moz-box-shadow: 0 8px 6px -6px #999;
   box-shadow: 0 8px 6px -6px #999;
}
html css drop-down-menu bootstrap-4 navbar
2个回答
0
投票

如果您希望菜单项正确对齐，则需要在下拉列表中使用dropdown-menu-right。

不清楚的是你使用切换器的原因，因为你没有任何可折叠的菜单项（navbar-collapse）。只需删除切换器并使用navbar-expand，以便Navbar不会在移动视图中折叠。

<nav class="navbar navbar-expand navbar-light fixed-top" style="background-color: #FFFFFF;">
    <a class="navbar-brand mx-auto" href="#">My Brand</a>
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false"> 
                Welcome, User <b class="caret"></b>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
    </ul>
</nav>

https://www.codeply.com/go/j1HZLEdyrC

下拉列表将始终在移动折叠的Navbar中打开，这是按设计的。如果您确实希望保留移动切换器，并打算添加可折叠项，则可以在position-absolute上使用dropdown-menu来覆盖默认行为。

<nav class="navbar navbar-expand-md navbar-light" style="background-color: #FFFFFF;">
    <button class="navbar-toggler navbar-nav mr-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span> 
    </button>
    <a class="navbar-brand mx-auto" href="#">My Brand</a>
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false"> 
                Welcome, User <b class="caret"></b>
            </a>
            <div class="dropdown-menu dropdown-menu-right position-absolute" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
    </ul>
</nav>

演示两种选择：https://www.codeply.com/go/j1HZLEdyrC

相关：Bootstrap 4 Navbar Dropdown Menu Items Right

0
投票

对于移动下拉菜单的问题，您也可以使用它在移动视图中绝对定位：

.navbar-nav .dropdown-menu {
  position: absolute;
}

对于下拉列表的对齐，只需将类dropdown-menu-right添加到dropdown-menu。

请参阅下面的演示（我已经给了!important来处理代码段中的级联顺序）和working fiddle here：

.navbar {
  -webkit-box-shadow: 0 8px 6px -6px #999;
  -moz-box-shadow: 0 8px 6px -6px #999;
  box-shadow: 0 8px 6px -6px #999;
  /* the rest of your styling */
}

.navbar-nav .dropdown-menu {
  position: absolute !important;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-md navbar-light fixed-top" style="background-color: #FFFFFF;">

  <button class="navbar-toggler navbar-nav mr-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span> 
            </button>

  <a class="navbar-brand mx-auto" href="#">My Brand</a>

  <ul class="nav navbar-nav ml-md--auto">

    <li class="dropdown">

      <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false"> 
                                Welcome, User <b class="caret"></b>
                            </a>

      <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="navbarDropdown">
        <!-- ADDED CLASS -->
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>

    </li>
  </ul>
</nav>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.