将引导下拉菜单移动到另一侧答案

【问题标题】：Move bootstrap dropdown menu to another side将引导下拉菜单移动到另一侧
【发布时间】：2018-10-11 09:49:32
【问题描述】：

通过 Bootstrap 制作的下拉菜单。我需要将它移到左侧，如下面的屏幕截图所示。

在 sn-p 和截图中不要注意颜色。

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

【问题讨论】：

标签： css twitter-bootstrap alignment bootstrap-4

【解决方案1】：

使用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>

【讨论】：