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>

This is perfect as I wanted.

The text's overlapping with icon bar which I can't even click on.

您能否提供我吗？我试图去做，但它仍然不起作用。

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>