Question

我是新手，并以此创建了一个网站，但是我的下拉菜单无法正常使用，因此它无法“打开”窗口，因此有人可以帮助我吗？我在课堂上尝试了很多，但是没有用...

https://i.imgur.com/DbjKm3U.png

我的代码：

IndexOf("\")

Answer 1

此技术仅适用于Bootstrap 4

这不是问题，它是下拉菜单的默认行为，但是要解决这种情况，您需要使用dropdown-menu-right类，有关更多信息，请访问this链接。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Answer 2

Bootstrap的下拉组件的默认行为是与触发它的任何对象的左下边缘对齐。要覆盖此行为，您可以将dropdown-menu-right应用于dropdown-menu。以您自己的代码为例：

<ul class='dropdown-menu dropdown-menu-right' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
  <form action='includes/logout.inc.php' method='post'>
  <button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
  </form>
</li>
</ul>

不清楚您是在使用Bootstrap 3.x还是Bootstrap 4.x，但是在后者中，您也可以将响应行为应用于此类（即.dropdown-menu-lg-right，以便更好地在不同设备上修改UI或屏幕。

boostrap下拉菜单对齐

2 个答案: