課程
/前端開發(fā)
/Bootstrap
/玩轉Bootstrap(基礎)
.dropdown-menu{ ? ?left:100%; ? ?top:0; } 這段代碼的效果我看到了,但是誰能解釋下這么設置的原理呢,特別是這個Left,和父元素有什么關系嗎
2016-08-11
源自:玩轉Bootstrap(基礎) 5-10
正在回答
.dropdown-menu {
? position: absolute;
? top: 100%;
? left: 0;
? z-index: 1000;
? display: none;
? float: left;
...????省略其他
}
這是源代碼 可以看出使用了相對定位 這樣已經脫離了正常文檔流,接著的top:100%以及l(fā)eft:0是用來定位的
.btn-group,
.btn-group-vertical {
? position: relative;
? display: inline-block;
? vertical-align: middle;
}
這是父元素的樣式 可以看出有個絕對定位,接著top:100%指的就是父元素的高度,然后結果就是你點擊后這個菜單就顯示在這個父元素的下面(因為父元素還有個box-sizing:border-box,所以可以無視padding跟margin所帶來的負效果)left:0就是左對齊了。
最后 雖然跟你說的樣式不同 不過都是大同小異
wangao4321 提問者
Hallz 回復 wangao4321 提問者
在bootstrap.min.css的2876行,定義了.dropdown-menu的父類.dropdown{
position:relative;}(我查的)。因為父元素有position屬性,所以.dropdown-menu的position:absolute相對于父元素定位。top:100%的意思是在下拉菜單底部展開,left:0指
與父元素左端對齊。你的代碼好像寫錯了。。。。
舉報
告訴你使用Bootstrap,并且能夠獨立定制出適合自己的Bootstrap
4 回答請大神幫忙詳細解釋以下代碼的意思
5 回答關于name 和id 值設置的意義,誰能解釋一下
1 回答誰能給我解釋一下教程里說的歸零思想是什么意思。
3 回答下拉菜單課程代碼不能達到效果,誰能幫忙
1 回答我想知道table-responsive的原碼,誰可以告知一下
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(wǎng)微信公眾號
2016-08-12
.dropdown-menu {
? position: absolute;
? top: 100%;
? left: 0;
? z-index: 1000;
? display: none;
? float: left;
...????省略其他
}
這是源代碼 可以看出使用了相對定位 這樣已經脫離了正常文檔流,接著的top:100%以及l(fā)eft:0是用來定位的
.btn-group,
.btn-group-vertical {
? position: relative;
? display: inline-block;
? vertical-align: middle;
}
這是父元素的樣式 可以看出有個絕對定位,接著top:100%指的就是父元素的高度,然后結果就是你點擊后這個菜單就顯示在這個父元素的下面(因為父元素還有個box-sizing:border-box,所以可以無視padding跟margin所帶來的負效果)left:0就是左對齊了。
最后 雖然跟你說的樣式不同 不過都是大同小異
2016-08-12
在bootstrap.min.css的2876行,定義了.dropdown-menu的父類.dropdown{
position:relative;}(我查的)。因為父元素有position屬性,所以.dropdown-menu的position:absolute相對于父元素定位。top:100%的意思是在下拉菜單底部展開,left:0指
與父元素左端對齊。你的代碼好像寫錯了。。。。