Bootstrap не фиксированная кнопка

Question

Я пытаюсь исправить кнопку навигационной панели справа, я пробовал все, что видел на inte rnet, но ничего не работает: C Кнопки, которые я хочу исправить справа, - это красная и зеленая ( Они появляются на связанных изображениях).

Образец изображения ошибки

Другой образец изображения

Это код:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<a class="navbar-brand" href="/">JLC DEv</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item ">
      </li>
      {{#if user}}
      <a class="nav-link" href="/home">Inicio</a>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Universidad
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#">Tareas</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="/tasks/add">Agregar</a></li>
              <li><a class="dropdown-item" href="/tasks">Incompletas</a></li>
              <li><a class="dropdown-item disabled" href="/tasks/done">Completas</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/profile">Configuracion </a>
      </li>

      <div class="buttons" id="userButtons">
        <a href="/logout"><button type="button" class="btn btn-danger ml-auto">Salir</button></a>
      </div>
      {{else}}

      <div id="visitorButtons">
        <a href="/signin"><button type="button" class="btn btn-success ml-auto">Login</button></a>
      </div>

  </div>
  {{/if}}
  </ul>
  </div>
</nav>

<style>
  .dropdown-submenu {
    position: relative;
  }

  .dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
  }


  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;

  }
</style>

Answer 1

Habían var ios detalles en temas de sintaxis y orden que igual hubieran evitado que se rendereara bien todo. Te adjunto una versión corregida :). En resumen, tienes que añadir mr-auto (margin-right: auto) a navbar-nav y sacar los divs de botones fuera de ul.navbar-nav. Эти правила соответствуют раскрывающемуся списку. Quité el doble dropdown pero si quieres que Tareas reabra otro, copia y pega la estructura y listo.

Por alguna razón tienes también un # antes del if, no sé si quieras marcarlo como comentario per si si el else y el /if.

¡Bienvenido!

---

Привет, Джейкоб. Было несколько проблем с синтаксисом и DOM, которые в любом случае не позволили бы рендерить все. Прикрепляю исправленную версию :). Короче говоря, вам нужно добавить mr-auto (margin-right: auto) к navbar-nav и получить div-кнопки из ul.navbar-nav. Я также внес некоторые исправления в раскрывающийся список. Я удалил двойной раскрывающийся список, но не стесняйтесь снова добавить его.

По какой-то причине у вас также есть # перед if, я не знаю, собирались ли вы пометить его как комментарий, но если вы это сделали, прокомментируйте else и / if тоже.

Добро пожаловать в SO!

<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
    <a class="navbar-brand" href="/">JLC DEv</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item "></li>

            {{#if user }}

            <a class="nav-link" href="/home">Inicio</a>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Universidad
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <span class="dropdown-item"><strong>Tareas</strong></span>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="/tasks/add">Agregar</a>
                    <a class="dropdown-item" href="/tasks">Incompletas</a>
                    <a class="dropdown-item disabled" href="/tasks/done">Completas</a>
                </div>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="/profile">Configuración</a>
            </li>
        </ul>

        <div class="buttons" id="userButtons">
            <a href="/logout">
                <button type="button" class="btn btn-danger">Salir</button>
            </a>
        </div>

        {{ else }}

        <div class="buttons" id="visitorButtons">
            <a href="/signin">
                <button type="button" class="btn btn-success">Login</button>
            </a>
        </div>

        {{/if}}
    </div>
</nav>