Question

我正在寻找一种方法，使导航栏品牌（引导4）大于导航栏本身的高度。因此，导航栏品牌应与导航栏重叠。目前看来，导航栏的高度已增加，以适应导航栏的品牌。

我的HTML看起来像：

    <nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
    <div class="container">
        <div class="navbar-brand">
            <img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
        </div>
        <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 3</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

所以我想要的是重叠的东西

Answer 1

您可以简单地将navbar-brand位置设为：绝对...

.navbar-brand {
    top:0;
    position: absolute;
}

演示：https://www.codeply.com/go/sJc3uCUL5s

Answer 2

为.navbar赋予固定高度，然后对.navbar-brand应用转换

.navbar {
  height: 100px;
  background-color: rgba(255, 255,255, 0.9);
}

.navbar-brand {
  transform: translateY(calc(50% - 30px));
}

Find the fiddle here

Answer 3

您可以将.navbar的高度设置为某个固定值，并且由于您在.container上使用flexbox，因此可以将.nav-brand元素对齐到其顶部。 / p>

有关详情，请参见下文：

.navbar .container {
height: 100px; /* change this to whatever value you want */ 
}

.navbar-brand {
  align-self: flex-start;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
    <div class="container">
        <div class="navbar-brand">
            <img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
        </div>
        <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 3</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

Answer 4

您应该在图片上应用绝对位置。

.navbar-brand img {
    position: absolute;
    top: 10px;
    left: 30px;
    max-height: 100px;
    object-fit: contain;
}

导航栏小于导航栏品牌

4 个答案: