Html 无法删除导航栏中的默认引导填充

我有一个或多或少定制的引导导航栏。问题是，引导将

左填充

和

右填充

应用于

代码：

<ul class="nav nav-tabs nav-justified" role="tablist">
    <div class="bottom-line"></div>
            <li><a href="kolekcija.html">Kolekcija 24<sup> 7</sup></a></li>
            <li><a href="#">Izdelki</a></li>
            <li><a href="#">Zgodba</a></li>
            <li><a href="#">Mediji</a></li>
            <li><a href="#">Materiali</a></li>
        </ul>
        <div class="bottom-line"></div>

问题不在于填充物。问题是文本与中心对齐

在元素中添加一个
text align:left
，事情应该会按照您的意愿进行调整

这是引导程序中导致问题的代码

.nav-tabs.nav-justified > li > a {

}

如果更改JSFIDLE，可以将其添加到CSS的以下部分：

.nav > li > a {
    padding: 10px 5px !important;
    margin-right: 0 !important;
    color: black;
    text-align:left !important;
}

请注意
！重要信息
。这将覆盖主调用并提供所需的效果

这是更新后的示例。
我以前需要这样做。使用
后，将剩余内容放入带有
class=“container fluid”
的新div中。它应该是这样的：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
 <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand visible-xs" href="{{ HOME_PATH }}/">{{ site.title }}</a>
    </div>
   ...

.navbar-nav>li>a{
  padding-left:0px;
}

要消除链接中的填充，可以使用以下方法：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
 <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand visible-xs" href="{{ HOME_PATH }}/">{{ site.title }}</a>
    </div>
   ...

.navbar-nav>li>a{
  padding-left:0px;
}

问题是导航中的
a
标记显示为块，而不是内联。通过将
display
设置为
flex
，您可以将其更改为显示为灵活块，然后通过将
width
设置为
100%
将整个块区域保留为链接

只需将它们添加到您的自定义CSS中，以使
.nav>li>a
看起来像：

.nav > li > a {
 padding: 10px 5px !important;
 margin-right: 0 !important;
 color: black;
 display: flex;
 width: 100%;
}

这将保留块的顶部和底部填充/边距，块的全宽作为链接，并删除左/右填充/边距

这里有一个JSFiddle显示它：
我同意这里的一些其他答案，比如@dippas，但是要使文本向左对齐，正如您的图片所示，您还需要覆盖锚点填充：

.nav-tabs.nav-justified > li > a {
text-align:left;
padding-left:0px !important;
padding-right:0px !important;
}

我想更改默认的导航栏引导填充。我的意图是将底部填充改为4.5rem。下面的代码对我有用

.navbar{
padding-bottom: 4.5rem !important;

}