에서 부트 스트랩 , 오른쪽의 중앙에 왼쪽 메뉴 항목에 로고 A를 가지고 탐색 모음 및 로고 B를 생성 할 수있는 가장 플랫폼 친화적 인 방법은 무엇입니까?

여기까지 내가 시도한 것이 있는데, 로고 A가 왼쪽에 있고 왼쪽에 로고 옆의 메뉴 항목이 있고 오른쪽에 로고 B가 있도록 정렬되었습니다.

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>

2019 년 업데이트

부트 스트랩 4

Bootstrap 4에 flexbox가 있으므로 Navbar 정렬이 훨씬 쉽습니다. 다음은 Bootstrap 4 Navbar의 왼쪽 , 오른쪽 및 가운데 에 대한 업데이트 된 예 와 여기에 설명 된 다른 여러 정렬 시나리오 입니다.

인 flexbox , 자동 마진 및 주문 유틸리티 클래스는 필요에 따라 Navbar의 내용을 정렬하는 데 사용할 수 있습니다. 대형 화면과 모바일 / 축소 된보기 모두에서 Navbar 항목 (브랜드, 링크, 토글)의 순서 및 정렬을 포함하여 고려해야 할 사항이 많이 있습니다. Navbar에 그리드 클래스 (행, 콜)를 사용하지 마십시오 .

다음은 다양한 예입니다 ...

왼쪽, 중앙 (브랜드) 및 오른쪽 링크 :

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

http://www.codeply.com/go/qhaBrcWp3v

중앙 링크와 오버레이 로고 이미지가있는 다른 BS4 Navbar 옵션 :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="//placehold.it/120/ccff00" class="rounded-circle">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

또는 다음의 다른 Bootstrap 4 정렬 시나리오 :

브랜드 왼쪽, 데드 센터 링크 (빈 오른쪽)

브랜드 및 링크 센터, 왼쪽 및 오른쪽 아이콘

더 많은 부트 스트랩 4 예제 :

모바일 왼쪽 토글, 브랜드 오른쪽
센터 브랜드 및 모바일
오른쪽 링크는 데스크톱 링크, 모바일
왼쪽 링크 및 토글 센터 링크, 중앙 브랜드, 오른쪽 검색

참조 : 오른쪽으로 부트 스트랩은 4 개 정렬 메뉴 바 항목
모바일 붕괴하지 않는 버튼을 부트 스트랩 4 메뉴 바 우측 정렬
센터 부트 스트랩 4 네비게이션 바에있는 요소를

부트 스트랩 3

옵션 1- 왼쪽 / 오른쪽 탐색 링크가있는 브랜드 센터 :

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

http://bootply.com/98314 (3.x)

옵션 2- 왼쪽, 중앙 및 오른쪽 탐색 링크 :

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Center</a></li>
        <li><a href="#">Center</a></li>
      <li><a href="#">Center</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav>

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

http://www.bootply.com/SGYC6BWeBK

옵션 3- 브랜드와 링크를 모두 중앙에 배치

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://www.codeply.com/go/1lrdvNH9GI

더 많은 예 :

왼쪽 브랜드, 중앙 링크
왼쪽 토글, 중앙 브랜드

3.x의 경우 탐색 조정 : 부트 스트랩 센터 탐색 모음도 참조하십시오.

부트 스트랩의 중앙 Navbar
Bootstrap 4 네비게이션 바 항목을 오른쪽에 정렬