无法获得居中徽标以在折叠时重新定位到右侧 [英] Cannot get centered logo to reposition to the right on collapse

问题描述

我无法让徽标在折叠时停留在导航栏的右上角.查看有问题的图片.

I am having trouble getting the logo to stay in the top right side of the navbar on collapse. See images for issue.

收录的内容

折叠前的导航栏

要审核的代码:

    <nav class="navbar navbar-expand-md fixed-top navbar-light blue-grey lighten-5 mx-auto">
    <div class="container">

    <!-- Collapse Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobileNav" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible Content -->
    <div class="collapse navbar-collapse justify-content-md-center font-weight-bold" id="mobileNav">

        <!-- Links Left -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Internet</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Building Managers</a>
            </li>
        </ul>

        <!-- Navbar Brand -->
        <a id="logo" class="navbar-brand" href="index.html">
            <img class="hidden-sm-down" src="img/logoNav.png" alt="Lone Star Fiber"> 
        </a>

        <!-- Links Right -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Business Internet</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Developers</a>
            </li>
        </ul>
    </div>
</nav>

推荐答案

我认为该方法应类似于:

I think the approach should be similar to: Bootstrap NavBar with left, center or right aligned items

使用两个单独的nav-collapse与相同的.mobile-nav目标.使用order-*类在右侧的移动菜单之前显示徽标...

Use 2 separate nav-collapse with the same .mobile-nav target. Use the order-* classes to show the logo before the mobile menu on the right...

<nav class="navbar navbar-expand-md fixed-top navbar-light blue-grey lighten-5 mx-auto">
    <div class="container">

        <!-- Collapse Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".mobile-nav" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Collapsible Content -->
        <div class="collapse navbar-collapse justify-content-md-center font-weight-bold mobile-nav order-2">

            <!-- Links Left -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Internet</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Building Managers</a>
                </li>
            </ul>
            </div>
            <!-- Navbar Brand -->
            <a id="logo" class="navbar-brand order-1 order-md-2 text-center" href="index.html">
                <img class="" src="//placehold.it/130x30?text=Lone Star Fiber" alt="Lone Star Fiber">
            </a>
            <div class="collapse navbar-collapse justify-content-md-center font-weight-bold mobile-nav order-2">

            <!-- Links Right -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Business Internet</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Developers</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

https://www.codeply.com/go/iVjzxDF7Gf

这篇关于无法获得居中徽标以在折叠时重新定位到右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！