2014-03-18 61 views
1

裏面這是一個正常的引導3導航項目的摘錄:造型失去了引導3導航李項股利

<li><a href="#">Action</a></li> 

我已經離開了無關緊要的東西。

現在,在我的情況,我需要的菜單項一個是一個div裏面:

<li> <div> <a href="#">Action</a> </div> </li> 

這裏的問題是,它呈現爲只是一個普通的無樣式錯了地方的鏈接導航欄,不具有與第一個示例中的常規引導菜單項類似的任何方式。

這就是我需要的,只是在一個div中,沒有什麼比你在那裏看到的更多。

我知道我可以編輯Bootstrap css,只需添加一條適應此規則的規則,但如果可能,我真的很想避免這種規則。

我必須這樣做的原因是與Angular.js和動態菜單選項以及ng-if元素相關,但總之有一種相對簡單的方法來強制div中的鏈接樣式相同作爲其他引導3導航項目?

回答

3

簡短的回答是否定的,如果你改變標記,那麼你需要改變樣式。引導程序使用許多子選擇器來執行它的骯髒業務,但其中很少可能適用於您的特定情況。對於example,單級導航可能看起來像:

<ul class="nav nav-tabs"> 
    <li class="active"><div><a href="#">Home</a></div></li> 
    <li><div><a href="#">Profile</a></div></li> 
    <li><div><a href="#">Messages</a></li> 
</ul> 

所以你有3個款式覆蓋:

.nav-tabs>li>div>a { 
    margin-right: 2px; 
    line-height: 1.42857143; 
    border: 1px solid rgba(0, 0, 0, 0); 
    border-radius: 4px 4px 0 0; 
} 
.nav>li>div>a { 
    position: relative; 
    display: block; 
    padding: 10px 15px; 
} 
.nav-tabs>li.active>div>a, .nav-tabs>li.active>div>a:hover, .nav-tabs>li.active>div>a:focus { 
    color: #555; 
    background-color: #FFF; 
    border: 1px solid #DDD; 
    border-bottom-color: rgba(0, 0, 0, 0); 
    cursor: default; 
} 

不過,我會建議在源不是攻擊這一點。如果你想在Angular中使用Bootstrap組件,那麼我會盡量利用Bootstrap UI

+0

感謝您對Bootstrap UI的建議,它看起來很有趣,其他原因卻注意到它們沒有導航元素。 – JohnC