無法刪除導航欄中的默認引導程序填充

我有一個或多或少自定義的引導程序導航欄。事情是，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

無法刪除導航欄中的默認引導程序填充

回答

相關問題