在Bootstrap 4 WordPress主题中使用X（关闭）navbar-toggler-icon？

Question

我试图让toggler（汉堡包）图标变成X. 我已经关注了另一个帖子How to hide and replace navbar-toggler-icon in Bootstrap 4?，并使用了Codeply中的代码 我仍然无法改变图标。我认为其他地方出了问题。

这是我的导航代码：

＆＃13;

＆＃13;

<div class="container">
            <nav class="navbar navbar-toggleable-md navbar-light">

                <div class="navbar-brand">
                    <?php if ( get_theme_mod( 'wp_bootstrap_starter_logo' ) ): ?>
                        <a href="<?php echo esc_url( home_url( '/' )); ?>">
                            <img src="<?php echo esc_attr(get_theme_mod( 'wp_bootstrap_starter_logo' )); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                        </a>
                    <?php else : ?>
                        <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
                    <?php endif; ?>
					<button class="navbar-toggler navbar-toggler-center collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="my-1 mx-2 close">X</span>
					<span class="navbar-toggler-icon"></span>
					</button>
                </div>
                <?php
                wp_nav_menu(array(
                    'theme_location'    => 'primary',
                    'container'       => 'div',
                    'container_id'    => '',
                    'container_class' => 'collapse navbar-collapse justify-content-end',
                    'menu_id'         => false,
                    'menu_class'      => 'navbar-nav',
                    'depth'           => 3,
                    'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                    'walker'          => new wp_bootstrap_navwalker()
                ));
                ?>

            </nav>
        </div>

＆＃13;

＆＃13;

＆＃13;

这是我的CSS：

＆＃13;

＆＃13;

@media screen and (min-width: 200px) and (max-width: 998px){

    .navbar-toggler {
        display: block;
		width: 100%;
		float: none;
		margin-right: 0;	
    }/*
    .navbar-collapse.collapse {
        display: none !important;
    }*/
    .navbar-header {float: none; text-align:center;}
    nav.navbar-collapse.navbar-right.collapse.in {
        display: block !important;
    }
    nav.navbar-collapse.navbar-right.collapse,
    nav.navbar-collapse.navbar-right.collapse ul,
    nav.navbar-collapse.navbar-right.collapse li,
    nav.navbar-collapse.navbar-right.collapsing,
    nav.navbar-collapse.navbar-right.collapsing ul,
    nav.navbar-collapse.navbar-right.collapsing li {
        width: 100%;
    }
	.navbar-toggler>.close {display:inline;}
	.navbar-toggler.collapsed>.close, 
	.navbar-toggler:not(.collapsed)>.navbar-toggler-icon {display:none;}
	.navbar-brand {margin:0 auto;}
	
	#content .container {margin: 170px auto 0;}
}

＆＃13;

＆＃13;

＆＃13;

我不是html，css或php的新手，但我对BootStrap相对较新。 您会注意到navbar-collapse已被注释掉，这是因为它会立即关闭导航。这本身就是一个问题。这是使用BootStrap和UnderScores的wp-bootstrap-starter主题的子WordPress主题。任何帮助将不胜感激！

Answer 1

它是CSS，它应该是：

.navbar-toggler>.close {
    display: inline;
}
.navbar-toggler.collapsed>.close, 
.navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
    display: none;
}