Question

我正在使用BootStrap v4.3，导航中的下拉菜单有问题，它在屏幕右侧后隐藏： image of this dropdown 我马上说，添加负的左边距无效，因为那样会在移动设备上中断。

<nav class="navbar navbar-dark bg-primary navbar-expand-md">

        <a class="navbar-brand" href="index.php" >
            Nazwa
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-bar1" aria-controls="navbar-bar1" aria-expanded="false" aria-label="Przełączanie nawigacji" >
            <i class="fas fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse" id="navbar-bar1" >

            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="index.php">Strona główna</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Strona 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Strona 3</a>
                </li>
            </ul>

            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Zaloguj się lub zarejestruj</a>
                </li>

                <li class="nav-item dropdown">
                    <a id="navbar-subbar1" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Przełączanie menu konta" aria-haspopup="true" ><i class="fas fa-user"></i> Nacioszeczek</a>

                    <div class="dropdown-menu" aria-labelledby="navbar-subbar1">
                        <a class="dropdown-item" href="#"><i class="fas fa-user-tie"></i> Narzędzia administracyjne</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#"><i class="fas fa-user"></i> Moje konto</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#"><i class="fas fa-cogs"></i> Ustawienia</a>
                        <a class="dropdown-item" href="#"><i class="fas fa-key"></i> Zmień hasło</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Wyloguj</a> 
                    </div>
                </li>
            </ul>

        </div>

    </nav>

Answer 1

.dropdown-menu.show {
  left: -98px;
}

<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-dark bg-primary navbar-expand-md">

  <a class="navbar-brand" href="index.php">
            Nazwa
        </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-bar1" aria-controls="navbar-bar1" aria-expanded="false" aria-label="Przełączanie nawigacji">
            <i class="fas fa-bars"></i>
        </button>

  <div class="collapse navbar-collapse" id="navbar-bar1">

    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Strona główna</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Strona 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Strona 3</a>
      </li>
    </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Zaloguj się lub zarejestruj</a>
      </li>

      <li class="nav-item dropdown">
        <a id="navbar-subbar1" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Przełączanie menu konta" aria-haspopup="true"><i class="fas fa-user"></i> Nacioszeczek</a>

        <div class="dropdown-menu" aria-labelledby="navbar-subbar1">
          <a class="dropdown-item" href="#"><i class="fas fa-user-tie"></i> Narzędzia administracyjne</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#"><i class="fas fa-user"></i> Moje konto</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#"><i class="fas fa-cogs"></i> Ustawienia</a>
          <a class="dropdown-item" href="#"><i class="fas fa-key"></i> Zmień hasło</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Wyloguj</a>
        </div>
      </li>
    </ul>

  </div>

</nav>

BootStrap下拉菜单隐藏在屏幕后面

1 个答案: