Question

我的网站上有以下导航栏。在全屏上一切正常，但是当屏幕尺寸减小到最大宽度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，这不起作用。还尝试证明内容=中心。这也不起作用。

导航栏折叠也将出现在导航栏品牌（徽标）的下面吗？

Answer 1

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;
    }
}

Bootstrap CSS图像中心和导航栏与品牌一致

1 个答案: