>

브랜드 항목과 탐색 항목을 모바일보기에 맞추려고합니다.

모바일보기->잘못되었습니다. 중앙에 있지 않습니다. '브랜드'는 'link1-3'과 세로로 정렬해야합니다
데스크탑보기->Aling은 다음과 같아야합니다

행운없이 다른 것을 시도했습니다.
이것은 내가 시도한 것 중 하나입니다 .

내 코드 atm : Codeply.com

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <a href="#" class="navbar-brand mx-auto">Brand</a>    
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>   
    <div class="collapse navbar-collapse justify-content-end nav-justified" id="navbarNav">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Link 1<span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Link 2</a>
        <a class="nav-item nav-link" href="#">Link 3</a>
      </div>
    </div>
</nav>

브랜드 항목과 탐색 항목을 정렬하려면 어떻게해야합니까?

<시간>

Edit1 :1. 이미지 및 내가 달성하려는 것에 대한 더 나은 설명이 업데이트되었습니다.

Edit2 :해결 방법을 찾았습니다!받은 답변은 모두 내 문제를 해결합니다. 그러나dmbaughman 's답변은 가장 간단하며 웹 사이트의 다른 콘텐츠를 방해하지 않습니다.

  • 답변 # 1

    문제는 .navbar-brand 입니다  링크는 오른쪽의 메뉴 아이콘과 공간을 공유하므로 아래 링크만큼 넓지 않습니다. 메뉴 아이콘을 절대 위치에 놓으면 문서 흐름에서 해당 아이콘이 제거되고 브랜드/링크가 올바르게 정렬됩니다.

    현재 이 스타일을 .navbar-toggler 에 추가

    .navbar-toggler {
      position: absolute;
      top: 8px;
      right: 16px;
    }
    
    

    결과

  • 답변 # 2

    mx-auto를 사용하고 있으며 중앙에서 올바르게 작동하기 때문에 화면의 시작과 오른쪽의 버튼 사이에 조금 전에 .... jpeg를 참조하십시오. mx-auto는 버튼을 제거했기 때문에 가운데에 있음을 알 수 있습니다. 처음에는 마진 스타일을 백분율로 사용하고 오른쪽에서 브랜드를 조금 움직일 수 있습니다 ... Bye

    문제가 해결 되었습니까?

    이런 방식으로 브랜드를 변경

                  <a href="#" class="navbar-brand mx-auto"><span style="margin-left:50%">Brand</span></a>
    
    

    결과

관련 자료

  • 이전 ios - 뷰 A에서 뷰 B로 UIView 변환 변환
  • 다음 shell - 유닉스 찾기 목록 일치 디렉토리