Question

我是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;
}

Answer 1

如果要使菜单项正确对齐，则需要在下拉菜单上使用class Program { static void Main(string[] args) { List<File> files = new List<File>() { new File() { FileName = "DBTestScripts/SQLParallel/Insert_50000_Sales", CreatedByDate = DateTime.Parse("2018-08-07 12:12:12")}, new File() { FileName = "DBTestScripts/SQLParallel/Insert_50000_Sales", CreatedByDate = DateTime.Parse("2018-08-09 12:12:12")} }; var results = files.GroupBy(x => x.FileName).Select(x => x.OrderByDescending(y => y.CreatedByDate).FirstOrDefault()).ToList(); } } public class File { public string FileName { get;set;} public DateTime CreatedByDate { get;set;} }。

目前尚不清楚为什么要使用切换器，因为您没有可折叠的菜单项（dropdown-menu-right）。只需移除切换器并使用navbar-collapse，以使Navbar不会在移动视图中折叠。

navbar-expand

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

下拉菜单将始终在移动折叠的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>上使用position-absolute来覆盖默认行为。

dropdown-menu

两个选项的演示：https://www.codeply.com/go/j1HZLEdyrC

相关：Bootstrap 4 Navbar Dropdown Menu Items Right

Answer 2

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

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

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

2 个答案: