ブランドロゴが途中にあるレスポンシブブーツストラップナビ

Question

途中に4つのリンクとブランドロゴが付いた応答性の高いナビゲーションバーが欲しいです。 Navbarをブラウザの中央に配置します。しかし、私はそのレイアウトを実行するのに問題があります。
どうすれば実現できますか？

.navbar-header { 
 
    min-height: 150px; 
 
} 
 
.navbar { 
 
    background: transparent; 
 
    min-height: 113px; 
 
    top: 0px; 
 
    font-size: 18px; 
 
    width: auto; 
 
    border: none; 
 
    padding: 0px 0px; 
 
} 
 
.navbar-default .navbar-nav > li > a { 
 
    color: #fff; 
 
} 
 
.navbar-brand { 
 
    padding: 0 15px; 
 
    height: 113px; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar-nav { 
 
    position: relative; 
 
    right: -50%; 
 
    } 
 
    .navbar-nav > li { 
 
    position: relative; 
 
    left: -50%; 
 
    } 
 
    .navbar-nav > li a { 
 
    line-height: 113px; 
 
    vertical-align: middle; 
 
    padding: 0 24px; 
 
    } 
 
} 
 
@media (min-width: 992px) { 
 
    .navbar-nav > li a { 
 
    padding: 0 48px; 
 
    } 
 
} 
 
@media (min-width: 1200px) { 
 
    .navbar-nav > li a { 
 
    padding: 0 68px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="sr-only">Navigation ein-/ausblenden</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"> 
 
     <img src="images/brand.png" alt="Brand" width="310" /> 
 
     </a> 
 
    </div> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Start</a> 
 
     </li> 
 
     <li><a href="#">Idee</a> 
 
     </li> 
 
     <li class="hidden-xs"> 
 
      <a href="#"> 
 
      <img src="images/brand.png" alt="Brand" width="310" /> 
 
      </a> 
 
     </li> 
 
     <li><a href="#">Leistungen</a> 
 
     </li> 
 
     <li><a href="#">Kontakt</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

私はこれが

.navbar-header { 
 
\t min-height: 150px; 
 
    } 
 
    .navbar { 
 
\t background: transparent; 
 
\t min-height: 113px; 
 
\t top: 0px; 
 
\t font-size: 18px; 
 
\t width: auto; 
 
\t border: none; 
 
\t padding: 0px 0px; 
 
    } 
 
    .navbar-default .navbar-nav > li > a { 
 
\t color: #fff; 
 
    } 
 
    .navbar-brand { 
 
\t padding: 0 15px; 
 
\t height: 113px; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar-nav { 
 
\t position: relative; 
 
\t right: -50%; 
 
    } 
 
    .navbar-nav > li { 
 
\t position: relative; 
 
\t left: -50%; 
 
    } 
 
    .navbar-nav > li a { 
 
\t line-height: 113px; 
 
\t vertical-align: middle; 
 
\t padding: 0 24px; 
 
    } 
 
    } 
 
    @media (min-width: 992px) { 
 
    .navbar-nav > li a { 
 
\t padding: 0 48px; 
 
    } 
 
    } 
 
    @media (min-width: 1200px) { 
 
    .navbar-nav > li a { 
 
\t padding: 0 68px; 
 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="container-fluid text-center"> 
 
    <nav class="navbar navbar-default"> 
 
\t \t \t \t <div class="container-fluid"> 
 
\t \t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t \t \t \t <span class="sr-only">Navigation ein-/ausblenden</span> 
 
\t \t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="images/brand.png" alt="Brand" width="310"/></a> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="collapse navbar-collapse"> 
 
\t \t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t \t <li><a href="#">Start</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Idee</a></li> 
 
\t \t \t \t \t \t \t <li class="hidden-xs"><a href="#"><img src="images/brand.png" alt="Brand" width="310" /></a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Leistungen</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Kontakt</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </nav> 
 
</div>

Answer 2

を助けることを願っています私は、あなた自身のクラスを使用して、ブートストラップスタイルを編集しないことをお勧め。

.navbar-brand { 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
}