Question

导航栏切换图标未显示（一个简单的矩形显示在适当位置的切换按钮），PFB是我的代码。

我正在使用 Bootstrap 4

请帮助我以下代码中缺少的内容？

添加图片以了解问题

<header id="js-header" class="u-header u-header--static u-header--show-hide u-header--change-appearance" data-header-fix-moment="500" data-header-fix-effect="slide">
    <div class="u-header__section u-header__section--dark g-bg-black g-transition-0_3 g-py-10" data-header-fix-moment-exclude="g-bg-black g-py-10" data-header-fix-moment-classes="g-bg-black-opacity-0_7 u-shadow-v18 g-py-0">
        <a class="sr-only sr-only-focusable skip-navigation" id="skip-navigation " href="#dbCarousel">Skip to main content</a>
        <nav class="navbar navbar-expand-xl navbar-dark container col-sm-12">
            <div class="container col-sm-12 margin-left-right-1Percent" style="margin:auto;width:100%; max-width:100%">
                <!-- Responsive Toggle Button -->
                
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBar"
                        aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- End Responsive Toggle Button -->
                <!-- Navigation -->
                <div id="navBar" class="header-container-custom collapse navbar-collapse flex-sm-row g-pt-10 g-pt-5--lg" style="text-align:left;">

                    <ul class="navbar-nav g-font-weight-500" style="text-align:left; width:100%">
                        <li class="nav-item g-mx-15--lg g-my-1--lg hidden-xs" style="text-align:center;margin-left: 0px !important">
                            <a href="\" style="margin-top:40px;text-align:center">
                                <img src="/Images/logo256px.png" width="200" class="hidden-xs" alt="Logo" />
                            </a>
                        </li>
                        <li class="nav-item g-ml-0--lg g-my-1--lg nav-link2" style="text-align:left;padding-top:10px">
                            <h1><a href='someurl' class="nav-link2-padding nav-link2-font">Community</a></h1>
                        </li>
                        <li class="nav-item g-mx-15--lg g-my-1--lg nav-link2" style="text-align:left;padding-top:10px">
                            <h1><a href='someurl/spaces/111/index.html' class="nav-link2-padding nav-link2-font">Awareness</a></h1>
                        </li>
                        <li class="nav-item g-mx-15--lg g-my-1--lg nav-link2" style="text-align:left;padding-top:10px">
                            <h1><a href='someurl/training.html' class="nav-link2-padding nav-link2-font">Training</a></h1>
                        </li>
                        <li class="nav-item g-mr-10--lg g-my-1--lg nav-link2" style="text-align:left;padding-top:10px">
                            <h2><a href='someurl/spaces/23/index.html' class="nav-link2-padding nav-link2-font">Documentation</a></h2>
                        </li>
                    </ul>
                    <ul class="navbar-nav navbar-right g-font-weight-500 ulNotification">
                        <li class="dropdown" style="width:65px;">
                            <a href="#" class="dropdown-toggle notficationIcons belliconLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
                                <i class="fa fa-bell fa-lg" aria-hidden="true" style="width:30px; height:30px;"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li>
                                    <div id="dvNotifications" style="background-color:#0e0e0e;width:300px">
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown" style="width:65px;">
                            <a href="#" class="dropdown-toggle notficationIcons usericonLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
                                <img src="@Convert.ToString(Session[" UserProfilePhoto"])" alt="User Profile" class="image-profile" />
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li>
                                    <div id="dvLoginUserDetails">
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- End Navigation -->
            </div>
        </nav>
    </div>
</header>

Answer 1

以下CSS解决了该问题。

同一图像也从引导程序中加载，但是有些图像却无法在UI上呈现。下面一行的显式添加正在渲染图像。

.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

在Bootstrap 4中不可见navbar-toggler-icon

1 个答案: