如何删除顶部navbar-inverse navbar-collapse中的边框

Question

当我在boostrap上打开折叠菜单时，如何在顶部删除此边框？我试过用过这个：

   .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
     border:0 !important;
    }

但边界仍然存在，有人知道我该如何删除它？感谢

的jsfiddle： http://jsfiddle.net/x2pL74aw/3/

HTML：

<nav class="navbar navbar-inverse">
  <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>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
      </ul>
    </div>
  </div>
</nav>

的CSS：

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
 border:0 !important;
}

Answer 1

删除box-shadow＆amp;来自border-color的{​​{1}}。像：

.navbar-collapse

请看下面的代码段：

.navbar-collapse {
  box-shadow: none;
  border-color: none;
}

.navbar-collapse {
  box-shadow: none !important;
  border: none !important;
}

希望这有帮助！

Answer 2

同时将box-shadow设置为none

border: 0 !important;
box-shadow: none;