Bootstrap導航欄-刪除按鈕之間的空間

Question

我有個問題。 我有一個導航欄，其中的鏈接由下圖所示的圖像表示（請從現在開始忽略Home鏈接）：

我想水平去除每個圖像之間的灰色空間。 我嘗試在所有圖像和列表項上設置邊距：0％和填充：0％，但無濟於事。 研究Bootstraps源代碼時，我懷疑它與navbar-nav和nav類是flex容器有關，但是我不清楚應該為該問題提供什么值的flex屬性。

這是導航欄的HTML：

 <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_content"> <i class="glyphicon glyphicon-align-center"></i> </button> <a href="#" class="navbar-brand"> Survey webapp </a> </div> <div id="navbar_content" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a> </li> <li class="navitem"> <a href="#about"> <img class="navimage" src="Routine survey.png" /> </a> </li> <li class="navitem"> <a href="#contact"> <img class="navimage" src="Specific survey.png" /> </a> </li> <li class="navitem"> <a href="#help"> <img class="navimage" src="Help.png" /> </a> <a href="#settings"> <img class="navimage" src="Settings.png" /> </a> </li> </ul> </div> </div> </nav> 

這是相關的（？）CSS：

 .nav { padding: 0%; margin: 0%; } .navbar-nav { padding: 0%; margin: 0%; } .navitem { padding: 0%; margin: 0%; } 

在此先感謝您，非常感謝您的幫助！

最好的問候，約書亞

Answer 1

看起來Bootstrap（版本3）將填充應用於.nav內的<a>元素：

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

我不知道Bootstrap是否具有刪除該填充的本機方法，但是您始終可以自己覆蓋它：

.nav>li>a {
    padding: 0;
}