Wordpress中的菜单栏宽度问题

Question

大家好我已经在wordpress中创建了一个导航栏，但我不知道如何增加每个导航的宽度 任何人都可以帮助我

的CSS：

.navbar-default{
    margin:0px !important;}

.navbar-default .navbar-nav > li > a, .header-qlinks a.hlnk-qlinks {
    color: #fff !important;
}

.navbar-collapse {
    background: #352808;
}

通过wordpress生成的代码：

<?php
        wp_nav_menu( array(
        'menu'              => 'primary',
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'div',
        'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
        'walker'            => new wp_bootstrap_navwalker())
        );
        ?>

我需要更改每个带红色区域的宽度

如果您想要更多信息，请访问http://demo.seyali.com/skv_new_wp/

Answer 1

我从您的查询中了解到，您希望增加每个导航列表项的宽度。

以下是您在代码中的操作方法：

<强> 1。更改所有元素的宽度 -

.navbar-nav>li {
  float: left;
  padding: 0 20px; //To add 20px padding on left and right side
}

或

.navbar-nav>li {
  float: left;
  min-width: 150px; //specify proper min width.. 
}

<强> 2。如果您只想添加第一个元素的宽度（在红色框下）

.navbar-nav>li:first-child {
  min-width: 150px; //specify proper min width.. 
}

或

.navbar-nav>li:first-child {
  float: left;
  padding: 0 20px; //To add 20px padding on left and right side
}

Answer 2

您可以在width

中为.navbar-nav>li课程提供bootstrap.min.css

.navbar-nav>li {
     width: 140px;  //your required width
   }

注意：这会影响所有li. 或者您可以为每个li提供课程，然后为每个width提供不同的li。

或

padding

中的#menu-primary > li > a增加style.css

#menu-primary > li > a {
padding: 15px 15px 15px;
margin: 1px;
}

注意：这会影响所有li a. 您也可以在此处为每个anchor tag提供课程，然后为每个padding提供不同的anchor.