Question

我的导航栏周围有一个微弱的灰色边框，大约1像素宽。我已经尝试了一切，但它不会消失。我已经删除了边框和框阴影但仍然没有运气。

这是我的HTML：

 <nav class="navbar my-navbar "> 
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>

    </div>
  </div>
</nav>

和我的css：

.my-navbar{

background-image:url('nav.jpg');
margin-bottom:0 ;
 border: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none;
box-shadow: none;

}


.my-navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.my-navbar .navbar-collapse {
  text-align: center;
}

更新：我已经在页面中添加了几个全宽图像，并且这些图像周围也有这样的边框。我添加了这样的图像：

<img class="banner-img" src="banner.jpg" alt="banner"></img>

其中banner-img是：

 .banner-img{
     display: block;
     height: auto;
     max-width:100%;  
     width:100%;
     border:none !important;
 }

Answer 1

您需要使用ID

#myNavbar

Answer 2

那是真正的#myNavbar，然后边界为无或0。

#myNavbar{
border : 0 or none;
}

Answer 3

我终于明白了。我在photoshop上创建了网站，并从那里单独导出了每一层。我使用的方法在将每个图层转换为jpeg图像时在每个图层周围添加一个微弱的边框。我现在使用切片工具，边框消失了。谢谢你的帮助。

引导导航栏周围的微弱灰色边框

3 个答案: