Как переместить элемент «nav» под «navbar-brand» в моем Navbar - PullRequest
Новая
       31

Как переместить элемент «nav» под «navbar-brand» в моем Navbar

4 голосов
/ 09 марта 2019

Я использую Bootstrap 4 и устанавливаю navbar-brand в центр, а все элементы - на правую сторону.Я хочу установить свой элемент nav ниже navbar-brand.enter image description here

Кроме того, я хочу установить "login" и "log out" справа от nav, но использование mr-auto не работает.

html: 

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <a href="#" class="navbar-brand">Academind</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
          <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav  ">
      <li class="nav-item ">
        <a href="#" class="nav-link">Users</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Products</a>
      </li>
    </ul>
    <ul class="navbar-nav  mr-auto ">
      <li class="nav-item ">
        <a href="#" class="nav-link">Login</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Log out</a>
      </li>
    </ul>
  </div>
</nav>

css: 

@media (min-width: 768px) {
  .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

Ответы [ 2 ]

2 голосов
/ 09 марта 2019

Чтобы выровнять логин по правому краю, вы должны использовать ml-auto для автоматического заполнения стороны влево , что приведет к переходу на ссылки вправо .

enter image description here

Вариант 1:

Затем настройте min-height навигационной панели. Используйте align-items-end, чтобы выдвинуть ссылки внизу, и выровняйте марку сверху по желанию Это даст видимость 2 строк Navbar. 

@media (min-width: 567px) {
    .navbar-brand
    {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
    }
    .navbar {
        min-height: 90px;
    }
}  

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a href="#" class="navbar-brand">Academind</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse align-self-end" id="navbarMenu">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item ">
                <a href="#" class="nav-link">Login</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Log out</a>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/07ibCvkQJi

Вариант 2: (удалить лишний CSS)

Просто примените flex-column к navbar и оберните марку и тогблер вместе в один блок flexbox. Используйте утилиты auto margin для центрирования бренда. 

<nav class="navbar navbar-expand-sm navbar-dark bg-dark flex-column align-items-stretch">
    <div class="d-flex">
        <a href="#" class="navbar-brand mx-sm-auto mr-auto">Academind</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse w-100" id="navbarMenu">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Login</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Logout</a>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/qVJPhAy6fS

<Ч />

Связанный: Как сделать так, чтобы Бренд и Навбар были в отдельных строках?

1 голос
/ 09 марта 2019

Вы можете использовать класс начальной загрузки d-flex, без каких-либо дополнительных CSS: 

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="w-100 d-flex flex-column">

    <div class="w-100 d-flex justify-content-center align-items-center">
        <a href="#" class="navbar-brand">Academind</a>
        <button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>

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

        <ul class="navbar-nav mr-auto">
            <li class="nav-item ">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>

        <ul class="navbar-nav  ml-auto">
            <li class="nav-item ">
                <a href="#" class="nav-link">Login</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Logout</a>
            </li>
        </ul>

    </div>
</div></nav>

Демо: https://jsfiddle.net/PouyaAk/1m2pLn9j/18/

...