Bootstrap下拉菜單三角形的神祕之處是什麼？

我試圖瞭解Twitter Bootstrap下拉菜單包含在導航欄中時與他們不在時的區別。Bootstrap下拉菜單三角形的神祕之處是什麼？

將它們包含在導航欄中時，展開的菜單上會顯示一個稍微向上的三角形/箭頭。當沒有導航欄使用這個三角形是不是表明：

http://twitter.github.com/bootstrap/javascript.html#dropdowns

我只花了兩個小時探索CSS/HTML，我還是不明白，爲什麼......

任何想法？

來源

2012-12-27 Max

請問您可以添加兩種情況的截圖嗎？ – Zeta

鏈接重定向到Twitter Bootstrap下拉文檔頁面。你可以看到兩個scenari運行：http://twitter.github.com/bootstrap/javascript.html#dropdowns – Max

在導航元素中有兩種樣式適用於下拉菜單。它們分別是：

.navbar .nav > li > .dropdown-menu::before { 
    position: absolute; 
    top: -7px; 
    left: 9px; 
    display: inline-block; 
    border-right: 7px solid transparent; 
    border-bottom: 7px solid #CCC; 
    border-left: 7px solid transparent; 
    border-bottom-color: rgba(0, 0, 0, 0.2); 
    content: ''; 
} 
.navbar .nav > li > .dropdown-menu::after { 
    position: absolute; 
    top: -6px; 
    left: 10px; 
    display: inline-block; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid white; 
    border-left: 6px solid transparent; 
    content: ''; 
    }

他們創造彼此一個淺灰色，其他深灰色的頂部兩個三角形。如果您使用Chrome開發人員工具，則可以檢查這些元素並關閉不同的樣式以瞭解他們正在執行的操作。這些樣式不應用沒有導航欄

來源

2012-12-27 08:24:34 Devender

是的，我沒有看到！酷感謝:) – Max

-1

三角形可以通過下面的語法產生：

<b class="caret dropdown-toggle"></b>

來源

2012-12-27 10:00:55 Rajarshi

沒有脫字符是按鈕文本旁邊的倒三角形。我正在談論擴大的菜單泡沫上的白色三角形。但無論如何感謝 – Max

只需將其添加到CSS，你將能夠使用下拉菜單箭頭而不將下拉內導航欄

.dropdown-menu:before { 
    position: absolute; 
    top: -7px; 
    left: 9px; 
    display: inline-block; 
    border-right: 7px solid transparent; 
    border-bottom: 7px solid #CCC; 
    border-left: 7px solid transparent; 
    border-bottom-color: rgba(0, 0, 0, 0.2); 
    content: ''; 
} 

.dropdown-menu:after { 
    position: absolute; 
    top: -6px; 
    left: 10px; 
    display: inline-block; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid white; 
    border-left: 6px solid transparent; 
    content: ''; 
    } 

.dropdown-menu:before, .dropdown-menu.pull-right:before { 
right: 12px; 
left: auto; 
} 

.dropdown-menu::after, .dropdown-menu.pull-right:after { 
right: 13px; 
left: auto; 
}

來源

2013-07-08 15:29:25 user1467439

Bootstrap下拉菜單三角形的神祕之處是什麼？

回答

相關問題