将引导程序下拉菜单移到另一侧 [英] Move bootstrap dropdown menu to another side
本文介绍了将引导程序下拉菜单移到另一侧的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
通过Bootstrap进行的下拉菜单。我需要将其移到左侧，如下面的屏幕截图所示。
Dropdown menu made via Bootstrap. I need to move it to the left side like at the screenshot below.
不要注意摘要和屏幕截图中的颜色。
Don't pay attention to color in snippet and screenshots.
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active uppercase" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
<div class="dropdown-menu">
<a class="dropdown-item uppercase aboutUs" href="#">About us</a>
<a class="dropdown-item uppercase" href="#">Company</a>
<a class="dropdown-item uppercase" href="#">Our process</a>
<a class="dropdown-item uppercase" href="#">Services</a>
<a class="dropdown-item uppercase" href="#">Contact us</a>
<a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
</div>
</li>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
推荐答案
使用 dropdown-menu-right ...
https://www.codeply.com/go/ HbFHFA7PX6
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active uppercase" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item uppercase aboutUs" href="#">About us</a>
<a class="dropdown-item uppercase" href="#">Company</a>
<a class="dropdown-item uppercase" href="#">Our process</a>
<a class="dropdown-item uppercase" href="#">Services</a>
<a class="dropdown-item uppercase" href="#">Contact us</a>
<a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
</div>
</li>
</ul>
这篇关于将引导程序下拉菜单移到另一侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
