为什么我的徽标隐藏在导航栏背景后面？ Bootstrap

Question

我正在用 Twitter bootstrap 为朋友建立一个网站

我以前的导航栏是透明的，所以它看起来是白色的，因为网站背景是白色的

但是，我试图将其设为灰色，但是当我将背景颜色设置为灰色时，它会覆盖我的徽标

还有

我的导航栏顶部有一个白色间隙，即使我移除顶部填充，也有一个白色间隙。

我是新手，可能做错了。

谢谢

这是我的 html

 <div class = "mj-logo">
<a href="#" class="navbar-left"><img src="assets/images/logo"></a>
</div>



<nav class="navbar navbar-default text-center">

  <div class="container">
  <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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 id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav">
        <li><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT US</a></li>
         <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">OUR SERVICES<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="services/seo.php">Painting & Decorating</a></li>
            <li><a href="services/media-management.php">Rendering</a></li>
            <li><a href="services/analysis.php">Flooring & tiling</a></li> 
          </ul>
        </li>
        <li><a href="blog.php">GALLERY</a></li>
        <li><a href="blog.php">TESTIMONIALS</a></li>
        <li><a href="contact.php">CONTACT US</a></li>
      </ul>
    </div>
  </div>
</nav>

这里是CSS

header{
position:relative;
}
#social {
li {list-style: none;  padding:3px; float:right; color:darken(@brand-   primary,25); position:absolute; } 
} 

// main Header
header {
#logo { padding:0px 0; }
}

// Nav bar additional overrides: this is in on top of those in variables.less

// Remove excess borders
.navbar-default {
border-top:none;
border-left: 0;
border-right: none;
margin-top:30px;
padding-bottom:10px;
font-family: 'Montserrat', sans-serif;
margin-bottom: 0;
font-size:18px;
border-color: #333;
background-colour:#333;

    } 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
 border-bottom: 2px solid @brand-primary !important;
}

@border-radius-base:        3px;
@border-radius-large:       3px;
@border-radius-small:       3px; 

@grid-gutter-width:         0px;

//Navbar overrides 
@navbar-default-border:             2px;
@navbar-border-radius:             2px; 
@navbar-default-color:             #fff;
@navbar-default-bg:                #333;
@navbar-default-border:            @brand-primary;
@navbar-default-link-hover-bg:    transparent;


// Navbar links
@navbar-default-link-color:                #000;
@navbar-default-link-hover-color:          #000; 
// Navbar toggle
@navbar-default-toggle-hover-bg:           blue;
@navbar-default-toggle-icon-bar-bg:        @brand-primary;
@navbar-default-toggle-border-color:       @brand-primary;
@grid-float-breakpoint:                    700px;

@dropdown-link-hover-bg:         #000;
@dropdown-link-color:            @brand-primary;

Answer 1

如果你想在 navbar 上使用 logo 那么代码将是这样的：

<nav class="navbar navbar-default text-center">
     <a href="#" class="navbar-left"><img src="img/xxx.PNG"></a>
        <div class="container">
            <div class="navbar-header">
                 // Other code of your navbar
            </div>
        </div>
</nav>

Navbar 覆盖行的整个宽度。因此，如果您运行您的代码，您的徽标将位于 navbar 后面。

或者，如果你想在 navbar 上设置你的标志，那么代码将是这样的：

<div class="row">
    <a href="#" class="navbar-left"><img src="img/customer_logo.PNG"></a>
</div>



<nav class="navbar navbar-default text-center">
     <div class="container">
            <div class="navbar-header">
                   // Other code of your navbar
            </div>
     </div>
</nav>

**我没有发现导航栏顶部有任何空隙。

为什么我的徽标隐藏在导航栏背景后面？ Bootstrap

Why is my logo hidden behind my navbar background? Bootstrap

navbar

twitter-bootstrap

twitter-bootstrap-3