Bootstrap网格-导航栏-边框问题：导航栏尾部空白无法消除求方案

嘿，我太懂这种调样式调半天还搞不定的烦躁了！导航栏尾部的空白通常不是单纯靠改margin/padding就能解决的，结合你给出的Bootstrap代码片段（用了.container-fluid、.row、.list-inline这些类），大概率是框架自带的默认样式在“搞小动作”，给你几个快速排查和解决的方案：

1. 修复Bootstrap行与容器的间距冲突 #

Bootstrap的.row默认自带margin-right: -15px; margin-left: -15px;，而.container-fluid又有左右各15px的padding，嵌套层级不对时很容易出现尾部空白。你可以给导航栏的行加个自定义类重置margin：

.custom-nav-row {
    margin-right: 0;
    margin-left: 0;
}

然后把HTML里的<div class="row">改成<div class="row custom-nav-row">

2. 清除列表项的默认间距与inline-block空白 #

Bootstrap的.list-inline里的<li>默认有左右5px的padding，而且inline-block元素之间的换行空格也会产生间隙。可以这么处理：

• 方案一：直接重置列表项的padding

.ul-menu-color.menuitem {
    padding-right: 0;
    padding-left: 0;
}

• 方案二：消除inline-block的空白字符
  给<ul>加个自定义类，通过字体大小清除间隙，再给列表项恢复正常字体：

.list-inline.no-gap {
    font-size: 0;
}
.list-inline.no-gap li {
    font-size: 14px; /* 改成你实际需要的字体大小 */
}

然后把<ul>改成<ul class="list-inline clearfix no-gap">

3. 确保清除浮动生效 #

你虽然加了.clearfix，但有时候浮动元素的层级问题会导致清除失效。可以替换成更稳妥的自定义清除浮动样式：

.clearfix::after {
    content: "";
    display: table;
    clear: both;
    width: 100%;
}

4. 检查列类的默认padding #

你给<li>加了.col-xs-6、.col-sm-3这些Bootstrap列类，它们默认有左右15px的padding，如果是这个导致的尾部空白，直接给这些列重置padding即可：

.ul-menu-color.menuitem {
    padding-right: 0;
}

如果以上方法都不行，建议打开浏览器开发者工具（F12），直接选中尾部空白区域，查看是哪个元素的margin/padding或者伪元素导致的，对着改肯定能解决！

内容的提问来源于stack exchange，提问作者user9553543