Question

我正在为朋友建立一个带有Twitter bootstrap的网站

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

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

另外

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

我很新，这样做可能做错了。

由于

这是我的HTML

[
  {
    "id": 1,
    "name": "BigCartel",
    "slug": "bigcartel",
    "logo_cdn_url": "http://placehold.it/200x200",
    "active": true,
    "authentication_type": {
      "description": "Oauth Authentication Token",
      "slug": "oauthauthenticationtoken"
    }
  },
  {
    "id": 2,
    "name": "Lightspeed Retail",
    "slug": "lightspeed_retail",
    "logo_cdn_url": "http://placehold.it/200x200",
    "active": true,
    "authentication_type": {
      "description": "Oauth Authentication Token",
      "slug": "oauthauthenticationtoken"
    }
  }
]

这是CSS

 <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>

Answer 1

如果您想在logo上使用navbar，则代码将如下所示：

<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>

**我在导航栏顶部找不到任何间隙。

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

1 个答案: