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

debugcn 发表于 Dev

RA19

我的网站上有以下导航栏。在全屏上一切正常，但是当屏幕尺寸减小到最大宽度 992px 时，我试图将屏幕上的徽标居中并将折叠导航栏移动到与徽标内嵌。

    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">
        <img class="darklogo" href="#page-top" width="30%"  src="img/redlogo.png" />
        <img class="whitelogo" href="#page-top" width="30%" border="0" alt="null" src="img/whitelogo.png" />
    </a>
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" 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 js-scroll-trigger selected" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#portfolio">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>




  #mainNav .darklogo {
    display: none;
}


#mainNav .whitelogo {
    display: block;
}



#mainNav.navbar-shrink .darklogo {
    display: block;
}

#mainNav.navbar-shrink .whitelogo {
    display: none;
}


@media (max-width: 992px) {
    #mainNav .whitelogo {
        display: none;
    }

    #mainNav .darklogo {
       width: 50%;
       display: block;
    }
}

我尝试添加：align-content = center，这不起作用。也试过证明内容=中心。这也行不通。

此外，导航栏折叠位于导航栏品牌（徽标）下方，是否可以将其与一行对齐？

穆斯塔法·阿科班

https://jsfiddle.net/xmcfn6r0/8/

如果你改变了width，.darklogo你也需要改变left它的价值。

@media (max-width: 992px) {
    #mainNav .whitelogo {
        display: none;
    }

    #mainNav .navbar-brand {
        position: absolute;
        left: 50%;
    }

    #mainNav .darklogo {
        width: 50%;
        position: relative; 
        left: -25%;
        display: block;
    }
}

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

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