ブートストラップ固定ナビの途中にロゴイメージを置くにはどうすればいいですか？

Question

私はブートストラップを使用してウェブサイトを作成しようとしており、以前はブートストラップを使っていました。今回は固定ナビでサイトを作っており、ロゴはナビリンクの途中にあります。私はまた、ロゴをnavリンクの上に置いておきたい。

私が今持っているコードはこれです：

この画像は私がやろうとしています何が表示されます

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #fff; 
 
    color: #000; 
 
    font-size: 14px; 
 
    font-family: 'Helvetica', serif; 
 
} 
 

 
.navbar { 
 
    background: none; 
 
    border: none; 
 
    margin-top: 20px; 
 

 
} 
 

 
.container-fluid { 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
    margin-left: -40px; 
 
} 
 

 
.navbar ul li { 
 
    display: block; 
 
    text-align: center; 
 
    float: left; 
 
    width: 20%; 
 

 
} 
 

 
.fourth-color { 
 
    background-color: #ffecec; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
} 
 

 
.third-color { 
 
    background-color: #122212; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
} 
 

 
.second-color { 
 
    background-color: #aaa; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
} 
 

 
.first-color { 
 
    background-color: #f25727; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
}

<!-- Start of Nav Bar --> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <ul> 
 
     <li class="first-color"><a href="#">First</a></li> 
 
     <li class="second-color"><a href="#">Second</a></li> 
 
     <li><a href="#">Logo</a></li> 
 
     <li class="third-color"><a href="#">Third</a></li> 
 
     <li class="fourth-color"><a href="#">Fourth</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

私はリンクしよう画像、それは正しくフィットせず、全体のナビゲーションバーにネジが付きます。どんな助けもありがとう！

Answer 1

ここで問題となるのは、クラスを持つliだけにパディングがあることです。 （ロゴが中央にないアンカーは、パディング付きのクラスがないためです）

ex。

.navbar ul li { 
    display: block; 
    text-align: center; 
    float: left; 
    width: 20%; 
} 

.fourth-color, .third-color, .second-color, .first-color { 
    padding-top: 30px; 
    padding-bottom: 30px; 
} 

すべてのリストにパディングを適用すると問題は解決します。

.navbar ul li { 
    padding-top: 30px; 
    padding-bottom: 30px; 
} 

中間ロゴは、 position relativeを使用して、クラスまたは私の場合は:nth-childのように、以下に示すように追加のスタイルを追加する必要があります。

@import url("http://fonts.googleapis.com/css?family=Raleway&subset=latin,latin-ext"); 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #fff; 
 
    color: #000; 
 
    font-size: 14px; 
 
    font-family: 'Helvetica', serif; 
 
} 
 

 
.navbar { 
 
    margin-top: 1em; 
 
    text-align: center; 
 
} 
 

 
.navbar ul { 
 
    padding: 0; 
 
    text-decoration: none; 
 
    list-style: none; 
 
} 
 

 
.navbar li { 
 
    display: block; 
 
    float: left; 
 
    width: calc(20% - 1px - 0.906752000000002em); 
 
    padding: 1.16em 1em; 
 
    font: 100 21px "Raleway", sans-serif; 
 
    background: #000; 
 
    color: #fff; 
 
    opacity: 1; 
 
    transition: all 0.1s linear; 
 
} 
 

 
.navbar li:nth-child(1) { 
 
    background: #ff410e; 
 
} 
 

 
.navbar li:nth-child(2) { 
 
    background: #f4ca00; 
 
} 
 

 
.navbar li:nth-child(3) { 
 
    background: #fff; 
 
    color: #000; 
 
    border: 1px solid #000; 
 
    border-radius: 2.84em; 
 
    padding: 1.76em 0; 
 
    width: 20%; 
 
    position: relative; 
 
    margin: -0.64em -2.16em; 
 
    z-index: 1; 
 
} 
 
.navbar li:nth-child(3) a { 
 
    color: #000; 
 
} 
 

 
.navbar li:nth-child(4) { 
 
    background: #99d81b; 
 
} 
 

 
.navbar li:nth-child(5) { 
 
    background: #00abf3; 
 
} 
 

 
.navbar li:hover:not(:nth-child(3)) { 
 
    opacity: 0.7; 
 
} 
 

 
.navbar a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.navbar .active { 
 
    text-decoration: underline; 
 
}

<!-- Start of Nav Bar --> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <ul> 
 
     <li><a class="active" href="#">First</a></li> 
 
     <li><a href="#">Second</a></li> 
 
     <li><a href="#">Logo</a></li> 
 
     <li><a href="#">Third</a></li> 
 
     <li><a href="#">Fourth</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

私は、このメニューバーのためのリストを使用してお勧めしません、ドロップダウンリストの作成を計画していない限り。代わりにyou can just style the anchors to fit your needs。 （あなたのコードDRYを覚えておいてください）：