Переместить выпадающее меню начальной загрузки на другую сторону - PullRequest
Новая
       23

Переместить выпадающее меню начальной загрузки на другую сторону

0 голосов
/ 01 мая 2018

Раскрывающееся меню с помощью Bootstrap. Мне нужно переместить его в левую сторону, как на скриншоте ниже.

Не обращайте внимания на цвет в сниппете и на скриншотах. Before

After

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

1 Ответ

0 голосов
/ 01 мая 2018

Использование 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>

Похожие: Bootstrap 4 Элементы выпадающего меню Navbar справа

...