Начальная настройка выравнивания NavBar (3 столбца с отзывчивым меню) - PullRequest
Новая
       31

Начальная настройка выравнивания NavBar (3 столбца с отзывчивым меню)

0 голосов
/ 27 июня 2018

У меня довольно простой вопрос, но мое портфолио будет выглядеть лучше, если я смогу сделать это простое дополнение.

Я хочу, чтобы мой NavBar в начальной загрузке был в 3 столбцах, по сути, как изображение, которое я смоделировал ниже.

A basic idea of what I need.

В настоящее время у меня есть базовая настройка начальной загрузки navBar с кодом по умолчанию, например: 

<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-white fixed-top">
  <div class="container">

    <a class="nav-link" href="#">my name goes here</a>      

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="#">about</a></li>
        <li class="nav-item"><a class="nav-link" href="#">resume</a></li>
      </ul>
    </div>

  </div>
</nav>

Я могу сделать странную версию правильной, если возиться с отступами и прочим, но я этого не хочу. Самым сложным для меня является понимание адаптивной версии, когда одна ссылка слева (работа) и две ссылки справа (о, резюме) сливаются в одну выпадающую навигацию, и заголовок «мое имя здесь» становится заголовком. выше это на мобильном телефоне.

Любая помощь или точка в правильном направлении была бы великолепна.

Кроме того, можно предположить, что мой CSS является базовым загрузочным CSS.

Спасибо

UPDATE 

<!-- Navigation -->
<nav class="navbar navbar-light navbar-expand-md bg-success justify-content-between">
<div class="container-fluid">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link pl-0" href="#">work <span class="sr-only">work</span></a>
            </li>
        </ul>
    </div>
    <a href="/" class="navbar-brand mx-auto d-block text-center order-0 order-md-1 w-25">Colin Grant</a>
    <div class="navbar-collapse collapse dual-nav w-50 order-2">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="">about</a></li>
            <li class="nav-item"><a class="nav-link" href="">resume</a></li>
        </ul>
    </div>
</div>

Кажется, это работает отлично, какие-нибудь советы по его улучшению?

Спасибо

...