时间戳

首页 > 解决方案 > 如何使徽标与引导程序中的导航栏重叠？

html - 如何使徽标与引导程序中的导航栏重叠？

问题描述

我在引导程序中有一个导航栏，它的中间有一个徽标图像。我想让图像更大并延伸到导航栏之外，但导航栏只是延伸以适应徽标的大小。像这样： 例子。

这是我的导航栏代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
    <ul class="navbar-nav ml-auto text-center">
      <li class="nav-item active">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
  <div class="mx-auto my-2 order-0 order-md-1 position-relative">
    <a class="mx-auto" href="#">
      <img src="http://placehold.it/120/ccff00" class="rounded-circle" height="120" width="120">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
  </div>
  <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
    <ul class="navbar-nav mr-auto text-center">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

我需要做些什么才能使徽标覆盖如我所愿？非常感谢，如果有人能解决这个问题！

标签： htmlcsstwitter-bootstrap

解决方案

另一种解决方案是将绝对位置与手动设置left值结合使用，具体取决于您希望元素的位置。

.main-logo {
  left: 50%;
  top: 0;
  margin-left: -60px !important;
}

.navbar-collapse:first-child {
  padding-right: 90px;
}

.navbar-collapse:last-child {
  padding-left: 90px;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="m-0 order-0 order-md-1 position-absolute main-logo">
        <a class="mx-auto" href="#">
            <img src="http://placehold.it/120/ccff00" class="rounded-circle" height="120" width="120">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

https://codepen.io/teryeah/pen/NWqXYOO

推荐阅读