Bootstrap Navbar中心品牌具有響應能力

Question

我正在實施Bootstrap導航欄徽標，以使其位於中心位置。 最近，我找到了要解決的CSS代碼。 但是，關鍵是它對於大型設備是完美的，但是當我將檢查元素與小型設備一起使用時，它並沒有像我想的那樣響應。 這是代碼：

 .sFont{ font-family: Gotham-Med; color: #ffffff; font-size: 25pt; text-align: center; } .centeR { position: absolute; left: 50%; margin-left: -50px !important; display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <nav class="navbar navbar-inverse" style="background-color: black; border: none; border-radius: 0px;"> <div class="container-fluid"> <div class="navbar-header"> <p class="centeR sFont"><img style="height: 45px;" src="Logo.png"/>&nbsp;Penston</p> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> </ul> </li> </ul> </div> </div> </nav> 

這是我想要的完美。

文字與圖標欄重疊，我什至無法點擊。

你能建議我嗎？ 我嘗試這樣做，但仍然無法正常工作。

Answer 1

這可能會有所幫助。 您可以絕對定位圖像，然后將文本相對於圖像定位，並在navbar以負邊距偏移它，以使所有內容居中。

請參見示例代碼段。

 .navbar.navbar-inverse { background-color: black; border: none; border-radius: 0px; } .navbar.navbar-inverse .navbar-brand img { margin-top: -15px; height: 50px; } .navbar.navbar-inverse .navbar-brand.navbar-brand-centered { position: absolute; left: 50%; width: 100px; } .navbar.navbar-inverse .logo { margin-top: -35px; position: relative; left: 60px; font-family: Gotham-Med; color: #ffffff; font-size: 25pt; } .navbar.navbar-inverse > .container .navbar-brand.navbar-brand-centered, .navbar.navbar-inverse > .container-fluid .navbar-brand.navbar-brand-centered { margin-left: -110px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-brand navbar-brand-centered"> <img src="http://placehold.it/50x50" /> <p class="logo">Penston</p> </div> </div> <div class="collapse navbar-collapse" id="bs-nav"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> </ul> </li> </ul> </div> </div> </nav>