Question

我意识到position:absolute;代码中的CSS .navbar-header是使我的品牌链接无法点击的原因。我将其更改为position:relative;，但它使Navbar不成比例。我想这会发生在很多人身上。所以我想知道是否有人知道如何解决这个问题，或者我是不是从头开始重建？

HTML：

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <a href="IMG" class="navbar-brand">
        <img alt="Brand" <img src="https://i.imgur.com/a509iUv.png"
             class="img" alt="Logo" width="30" height="25">
      </a>
    </div>
    <div class="navbar-button">
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
  </div>
  <div class="collapse navbar-collapse navHeaderCollapse">
    <ul class="nav navbar-nav">   
      <li class=""><a href="#">Link</a></li>
      <li class=""><a></a></li>
      <li class=""><a></a></li>
      <li class=""><a href="#">Link</a></li>
      <li class=""><a></a></li>
      <li class=""><a></a></li>
      <li class=""><a href="#">Link</a></li>
      <li class=""><a></a></li>
      <li class=""><a></a></li>
      <li class="active"><a href="#">Link</a></li>
    </ul>
  </div>
</div>

CSS：

.navbar-header{
    position:absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:auto;
    padding-left:15px;
}

当Navbar折叠时，Bootstrap Logo Link无法正常工作？

0 个答案: