php - 使用 Bootstrap 为 `wp list` 类别设置样式

Question

问候， 我正在尝试设置类别列表的样式，但我不知道我必须在其中搜索什么，所以我将此 html 代码设置为带有 Bootstrap 的样式 wp_list_categories();

<nav class="navbar navbar-expand-lg navbar-dark our-color fixed-top">
    <div class="container"> <a class="navbar-brand" href="#"> <img src="<?php bloginfo('template_directory'); ?>/images/logo-woocommerce-white.png" width="150" height="30" alt=""> </a>
        <button class="navbar-toggler" 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 s">
                <li class="nav-item active bold"> <a class="nav-link" href="#">الرئيسية<span class="sr-only">(current)</span> </a> </li>
		<?php wp_list_categories(); ?>
                <li class="nav-item bold"> <a class="nav-link" href="#">خدمات</a> </li>
                <li class="nav-item bold"> <a class="nav-link" href="#">اتصل بنا</a></li>
            </ul>
	</div>
    </div>
</nav>

我想在这个类中导入 Wordpress 的类别 > 如果我把它放在 div 中它不会影响列表，我应该怎么做？

Answer 1

您可以按如下样式设置它

li{
list-style-type:none;
padding:10px;
border-radius:4px;
background:black;
margin-bottom:2px;

}

li a{
color:#fff;
text-decoration:none;
}

li:hover{
background:red;
transition:all 0.3s;
color:#fff;
}

<nav class="navbar navbar-expand-lg navbar-dark our-color fixed-top">
		<div class="container"> <a class="navbar-brand" href="#"> <img src="<?php bloginfo('template_directory'); ?>/images/logo-woocommerce-white.png" width="150" height="30" alt=""> </a>
			<button class="navbar-toggler" 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 s">
					<li class="nav-item active bold"> <a class="nav-link" href="#">الرئيسية<span class="sr-only">(current)</span> </a> </li>
					<?php wp_list_categories(); ?>
					<li class="nav-item bold"> <a class="nav-link" href="#">خدمات</a> </li>
					<li class="nav-item bold"> <a class="nav-link" href="#">اتصل بنا</a> </li>
					
				</ul>
			</div>
		</div>
	</nav>

Hope this will work. All the best. for any query please comment