Html 无法将导航栏居中并将底部边框添加到活动

我一直在尝试将导航栏居中，并在活动页面下添加一行，但不起作用。如有任何建议，将不胜感激。我已经在活动元素中添加了边框底部，并在ul中显示

内联块

，但它不起作用，为什么

    <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse navbar-menubuilder">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">AGENDA</a>
            </li>
            <li><a href="#">DOCUMENT MANAGEMENT</a>
            </li>
            <li><a href="#">CASE MANAGEMENT</a>
            </li>
            <li><a href="#">SERVICE DIRECTORY</a>
            </li>
        </ul>
    </div>
</div>

/*样式在这里*/
#自定义-bootstrap-menu.navbar-default.navbar品牌{
颜色：rgba（119，119，119，1）；
}
#自定义-bootstrap-menu.navbar-default.navbar导航ul{
显示：内联块；
列表样式类型：无；
}
#自定义-bootstrap-menu.navbar-default{
字体大小：小；
字体系列：“Lato”，无衬线；
背景色：rgba（228229230,1）；
边框宽度：0px；
边界半径：0px；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li>a{
颜色：rgba（119,30,101,1）；
背景色：rgba（228229230,1）；
}
#自定义-bootstrap-menu.navbar-default.navbar-nav>li>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>li>a:focus{
颜色：rgba（51,51,51,1）；
背景色：rgba（228229230,1）；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>.active>a，
#自定义-bootstrap-menu.navbar-default.navbar-nav>.active>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>.active>a:焦点{
颜色：rgba（119,30,101,1）；
背景色：rgba（2312312311,1）；
边框底部：1px实心#771e65；
}
#自定义-bootstrap-menu.navbar-default.navbar切换{
边框颜色：#ddd；
}
#自定义-bootstrap-menu.navbar-default.navbar切换：悬停，
#自定义-bootstrap-menu.navbar-default.navbar切换：焦点{
背景色：#ddd；
}
#自定义-bootstrap-menu.navbar-default.navbar切换.图标栏{
背景色：#888；
}
#自定义-bootstrap-menu.navbar-default.navbar切换：悬停。图标栏，
#自定义-bootstrap-menu.navbar-default.navbar切换：焦点。图标栏{
背景色：#e4e6；
}
#自定义-bootstrap-menu.navbar-default.navbar导航li>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar导航li>a:焦点{
边框底部：1px实心#771e65；
}

切换导航

你真的很难。。 再加上这个

.collapse ul li{
  list-style-type: none;
  display: inline-block;
  margin: auto;
}
.collapse ul li a{
  text-decoration: none;
}
.collapse ul li a:hover{
  text-decoration: underline;
}
.collapse{
  text-align: center;
}

删除这个

#custom-bootstrap-menu.navbar-default .navbar-nav ul{
  display: inline-block;
  list-style-type: none;
}

---

您不必选择所有类和ID，只需选择主类即可Display不适合您，因为您只选择了ul。而列表样式类型不起作用，因为您仍然选择了justul。。对于列表样式类型，您必须选择li

，看起来您已经准备好在

活动的
链接下面加下划线，这里的任何链接上都没有
活动的
类作为示例

要使链接居中，请查看这些规则：并参阅工作示例

/***Added CSS***/
 #custom-bootstrap-menu.navbar.navbar-default .navbar-nav {
    text-align: center;
}
@media (min-width: 768px) {
    #custom-bootstrap-menu.navbar.navbar-default .navbar-nav > li {
        float: none;
        display: inline-block;
    }
    #custom-bootstrap-menu.navbar.navbar-default .navbar-nav {
        width: 100%;
        text-align: center;
    }
}


#自定义-bootstrap-menu.navbar-default.navbar品牌{
颜色：rgba（119，119，119，1）；
}
#自定义-bootstrap-menu.navbar-default.navbar导航ul{
显示：内联块；
列表样式类型：无；
}
#自定义-bootstrap-menu.navbar-default{
字体大小：小；
字体系列：“Lato”，无衬线；
背景色：rgba（228229230,1）；
边框宽度：0px；
边界半径：0px；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li>a{
颜色：rgba（119,30,101,1）；
背景色：rgba（228229230,1）；
}
#自定义-bootstrap-menu.navbar-default.navbar-nav>li>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>li>a:focus{
颜色：rgba（51,51,51,1）；
背景色：rgba（228229230,1）；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>.active>a，
#自定义-bootstrap-menu.navbar-default.navbar-nav>.active>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>.active>a:焦点{
颜色：rgba（119,30,101,1）；
背景色：rgba（2312312311,1）；
边框底部：1px实心#771e65；
}
#自定义-bootstrap-menu.navbar-default.navbar切换{
边框颜色：#ddd；
}
#自定义-bootstrap-menu.navbar-default.navbar切换：悬停，
#自定义-bootstrap-menu.navbar-default.navbar切换：焦点{
背景色：#ddd；
}
#自定义-bootstrap-menu.navbar-default.navbar切换.图标栏{
背景色：#888；
}
#自定义-bootstrap-menu.navbar-default.navbar切换：悬停。图标栏，
#自定义-bootstrap-menu.navbar-default.navbar切换：焦点。图标栏{
背景色：#e4e6；
}
/***添加CSS***/
#自定义-bootstrap-menu.navbar.navbar-default.navbar导航{
文本对齐：居中；
}
@介质（最小宽度：768px）{
#自定义-bootstrap-menu.navbar.navbar-default.navbar nav>li{
浮动：无；
显示：内联块；
}
#自定义-bootstrap-menu.navbar.navbar-default.navbar导航{
宽度：100%；
文本对齐：居中；
}
}

切换导航












你的JSFIDLE真是一团糟！！也检查一下你的DOM。
/***Added CSS***/
 #custom-bootstrap-menu.navbar.navbar-default .navbar-nav {
    text-align: center;
}
@media (min-width: 768px) {
    #custom-bootstrap-menu.navbar.navbar-default .navbar-nav > li {
        float: none;
        display: inline-block;
    }
    #custom-bootstrap-menu.navbar.navbar-default .navbar-nav {
        width: 100%;
        text-align: center;
    }
}