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

Question

Я хочу настроить положение раскрывающегося списка, поскольку на рабочем столе и в мобильном телефоне раскрывающийся список не отображается должным образом. Это показывает половину. Пожалуйста, проверьте изображение ниже:

Пожалуйста, проверьте мой код, что я делаю:

 <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
  <span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
  <ul class="navbar-nav">

   <li class="nav-item">
     <a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
   </li>

  </ul>

<ul class="nav navbar-nav ml-auto">
  <!-- Dropdown -->
  <li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
   <div class="dropdown-menu" style="margin-left:-50px;">
      <a class="dropdown-item" href="sp.php">My Profile</a>
      <a class="dropdown-item" href="cp.php">Change Password</a>
     <a class="dropdown-item" href="logout.php">Logout</a>

   </div>
  </li>
  </ul>
 </div>
 </nav>

Моя проблема в том, если я добавлю поле left-left: 30px; затем выпадающий не виден на мобильном телефоне. Если я добавлю padding-left: 30px; случается то же самое. В этом случае отступы и поля не работают. Также текстовая ссылка также не правильно выровнять. И не фиксируется по краю и отступам.

Любая идея или предложение приветствуются.

Answer 1

Пожалуйста, перезапишите загрузочную версию CSS в вашем файле CSS.

.dropdown-menu {
    left: -90px;
}

По умолчанию left: 0; в Bootstrap.css файле. Добавьте negative значение того, что вам нужно.

Answer 2

Вам нужно будет удалить style="margin-left:-50px;" из вашего dropdown-menu класса, а затем изменить ml-auto на mr-auto (margin-left против margin-right, где ваше меню по умолчанию).

Вот кодекс , если он вам подходит.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 
 <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
  <span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
  <ul class="navbar-nav">

   <li class="nav-item">
     <a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
   </li>

  </ul>

<ul class="nav navbar-nav mr-auto">
  <!-- Dropdown -->
  <li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
   <div class="dropdown-menu" style="margin-left:-50px;">
      <a class="dropdown-item" href="sp.php">My Profile</a>
      <a class="dropdown-item" href="cp.php">Change Password</a>
     <a class="dropdown-item" href="logout.php">Logout</a>

   </div>
  </li>
  </ul>
 </div>
 </nav>