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

我有一个或多或少自定义的引导程序导航栏。事情是，Bootstrap将padding-left和padding-right应用于导航栏中的<a>元素。我尝试覆盖导航栏中第一个<a>元素上的padding-left（表示“Collection”的元素），但没有成功。它实际上必须看起来像第一个<a>元素从导航栏的最开始处开始。我添加了一张照片以便于理解。无法删除导航栏中的默认引导程序填充

result

这里是小提琴：http://jsfiddle.net/jxgkrtsd/8/

代码：

<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>

CSS：

@import url("http://fonts.googleapis.com/css?family=Exo:400,500&subset=latin,latin-ext"); 

body { 
    font-family: 'Exo', sans-serif; 
    font-weight: 500; 
} 
.nav > li > a:hover, 
.nav > li > a:focus { 
    background-color: transparent; 
    border-color: transparent; 
} 

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

.nav-tabs.nav-justified > li > a { 
    border-bottom: none; 
} 

.nav-tabs > li > a:hover { 
    border-color: none !important; 
} 

a:hover, 
a:focus { 
    color: black !important; 
} 

.bottom-line { 
    height: 1px; 
    width: 1430px; 
    background: black; 
    position: absolute; 
}

来源

2014-10-02 Blaz Kranjcev

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

将text-align: left添加到您的元素，事情应该调整你喜欢它们的方式。

这是引导，是造成这一问题的代码

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

}

如果你改变你的jsfiddle，你可以将它添加到CSS的以下部分：

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

请注意!important后它。这将覆盖主要呼叫并提供期望的效果。

以下是更新的jsFiddle示例。

来源

2014-10-02 16:27:33 ZombieCode

我以前需要这样做。使用<nav class="....">后，将其余内容与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> 
    ...

然后你可以用它来摆脱填充在导航栏或品牌的联系。

nav .container-fluid{ 
    padding-left:0px; 
    padding-right:0px; 
}

要在你可以使用类似这样的链接摆脱填充：

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

来源

2014-10-02 16:36:29 spasticninja

的问题是，在导航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显示它：http://jsfiddle.net/9kzfaypp/

来源

2014-10-02 16:37:28

我同意在这里像@dippas一些其他的答案，但要获得文本冲洗到左侧，作为您的图片显示你需要重写锚填充以及：

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

http://jsfiddle.net/jxgkrtsd/10/

来源

2014-10-02 16:44:16 jimplode

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

回答

相关问题