Bootstrap：当导航栏折叠品牌重叠其他对象时

PeterL1995 发表于 Dev

彼得L1995

当导航栏折叠到汉堡菜单中时，品牌与导航链接重叠 - 我如何将它们分开以避免这种情况发生？理想情况下，我希望品牌出现在顶部。

导航栏结构正确并且在未折叠时按预期工作，所有项目都正确定位，只有在菜单折叠时才会出现问题。

JSFiddle：https ://jsfiddle.net/PeterLawson/Lkv8gj9a/2/

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!---Style Sheets-->
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <!---Website Title-->
  <title>Notepad</title>
</head>

<body>
  <!---Main Content-->
  <!---Navigation Bar-->
  <nav class="navbar nav-fill navbar-expand-lg navbar-light bg-light ">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarMenu">
        <!---Search Bar-->
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <!---Notepad Branding-->
        <ul class="nav navbar-nav navbar-center">
          <li><a class="navbar-brand" href="#"><img src="images\notepad-logo2.png" alt="Notepad Logo"
                style="width:150px;"></a></li>
        </ul>
        <!---Navigation Links-->
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Discover Notepads</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarProductDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Catalogue
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarProductDropdown">
              <a class="dropdown-item" href="#">Furniture</a>
              <a class="dropdown-item" href="#">Lighting</a>
              <a class="dropdown-item" href="#">Decor</a>
            </div>
          </li>
          <!---User Profile-->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarAvatarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              <img src="images\man.png" class="avatar">
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarAvatarDropdown">
              <a class="dropdown-item" href="#">Profile</a>
              <a class="dropdown-item" href="#">My Notepads</a>
              <a class="dropdown-item" href="#">Create New Notepad</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Sign Out</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!---Bootstrap JavaScript and jQuery-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <!---Firebase SDK-->
  <script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
</body>

</html>

CSS：

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

.navbar { 
    margin-left: 10px;
    margin-right: 10px;
}

.main-logo{
    width: 150px;
    height: 50px; 
}

.navbar-nav li a {
    line-height: 50px;
   }

.dropdown-menu > li > a { 
    height: 50px; 
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,0.6), 
      0 1px 1px rgba(0,0,0,0.1);
    background-color: transparent !important;
    z-index: 999;
  }

  .avatar img {
    border-radius: inherit;
    width: inherit;
    height: inherit;
    display: block;
    position: relative;
    z-index: 998;
  }

阿克贝尔·伊克巴尔

最简单的解决方案是将品牌图片从导航中移除 - 这将帮助您实现您想要的；你的styles.css文件没有被完全引用，所以我插入了一个不同的标志 - 根据你的标志，你必须调整填充等。

下面的工作片段：

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}

.navbar {
  margin-left: 10px;
  margin-right: 10px;
}

.main-logo {
  width: 150px;
  height: 50px;
}

.navbar-nav li a {
  line-height: 50px;
}

.dropdown-menu>li>a {
  height: 50px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.1);
  background-color: transparent !important;
  z-index: 999;
}

.avatar img {
  border-radius: inherit;
  width: inherit;
  height: inherit;
  display: block;
  position: relative;
  z-index: 998;
}

.navBarBrand {
  list-style: none;
  position: absolute;
  left: calc(50% - 21px);
  padding: 0;
  z-index: 1;
}

@media screen AND (min-width:991px) {
  .navBarBrand {
    padding: 12px 0px;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!---Website Title-->

<!---Main Content-->
<ul class="navBarBrand">
  <li>
    <a class="=" href="#"><img src="https://www.akberiqbal.com/apple-touch-icon-57x57.png" alt="Notepad Logo"></a>
  </li>
</ul>
<!---Navigation Bar-->
<nav class="navbar nav-fill navbar-expand-lg navbar-light bg-light ">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <!---Search Bar-->
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
      <!---Notepad Branding-->

      <!---Navigation Links-->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Discover Notepads</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarProductDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Catalogue
            </a>
          <div class="dropdown-menu" aria-labelledby="navbarProductDropdown">
            <a class="dropdown-item" href="#">Furniture</a>
            <a class="dropdown-item" href="#">Lighting</a>
            <a class="dropdown-item" href="#">Decor</a>
          </div>
        </li>
        <!---User Profile-->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarAvatarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img src="images\man.png" class="avatar">
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarAvatarDropdown">
            <a class="dropdown-item" href="#">Profile</a>
            <a class="dropdown-item" href="#">My Notepads</a>
            <a class="dropdown-item" href="#">Create New Notepad</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Sign Out</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!---Bootstrap JavaScript and jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!---Firebase SDK-->
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-07-23

我来说两句

0 条评论

登录后参与评论

上一篇：如何将图像（base64 到位图）显示到 Image Slider？

Bootstrap css 图像中心和导航栏与品牌内嵌折叠

Bootstrap：当导航栏折叠品牌重叠其他对象时

Bootstrap：当导航栏折叠品牌重叠其他对象时

UITableView的项目向下滚动后更改颜色，然后快速备份

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Mac OS X更新后的GRUB 2问题

验证REST API参数

Java Eclipse中的错误13，如何解决？

带有错误“ where”条件的查询如何返回结果？

ggplot：对齐多个分面图-所有大小不同的分面

尝试反复更改屏幕上按钮的位置 - kotlin android studio

如何从视图一次更新多行（ASP.NET - Core）

计算数据帧中每行的NA

蓝屏死机没有修复解决方案

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

离子动态工具栏背景色

VB.net将2条特定行导出到DataGridView

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

在Windows 7中无法删除文件（2）

python中的boto3文件上传

当我尝试下载 StanfordNLP en 模型时，出现错误

Node.js中未捕获的异常错误，发生调用