Bootstrap導航欄品牌不能在兩行上放置文本並做出響應

Question

我已經設計了一個響應式引導頁面，但是當我嘗試在開始時使用代碼（導航欄）時，卻卡住了。 我在“ a.navbar-brand”中放置了兩行文本，但是不會垂直且響應迅速地居中。 當我在尋找答案時，似乎沒人在某種程度上對我有用。 我正在尋找一個答案，該答案不是由填充和邊距組成，而是由一些響應代碼組成。 如果有人可以告訴我該怎么做，請。

這是導航欄的.png版本： 初始一個

這就是我從代碼中得到的： 用代碼制作

 <header> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">KrasiStoyanov <small>Front End Developer</small></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Newsletter</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> </header> 

 @font-face { font-family: 'jaapokki_enchanceregular'; src: url('type/jaapokkienchance-regular-webfont.eot'); src: url('type/jaapokkienchance-regular-webfont.eot?#iefix') format('embedded-opentype'), url('type/jaapokkienchance-regular-webfont.woff2') format('woff2'), url('type/jaapokkienchance-regular-webfont.woff') format('woff'), url('type/jaapokkienchance-regular-webfont.ttf') format('truetype'), url('type/jaapokkienchance-regular-webfont.svg#jaapokki_enchanceregular') format('svg'); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; } html, body { background-color: #f2f2f2; font-family: 'Century Gothic'; font-size: 16px; } header { width: 100%; } header nav.navbar { width: 100%; height: 100px; border: 0; border-radius: 0; background-color: #54c0b0; } header nav.navbar div.container-fluid { width: 72%; height: 100%; } header nav.navbar div.container-fluid div.navbar-header { font-family: 'jaapokki_enchanceregular'; } header nav.navbar div.container-fluid div.navbar-header a.navbar-brand { line-height: 1; color: #ffffff; font-size: 1.500em; text-transform: uppercase; } header nav.navbar div.container-fluid div.navbar-header a.navbar-brand small { display: block; font-size: 0.650em; font-family: 'Century Gothic'; text-transform: capitalize; } 

這是我的代碼。 請任何人..幫助我。

Answer 1

看看我的JSfiddle

對您來說不正確的三件事：

1. navbar-brand行高為1，這導致它在頂部對齊。

2. 套裝增加填充為每li a菜單元素。

3. 始終編​​寫較短的代碼。 您無需從根元素編寫CSS規則。 最多父元素就足夠了。