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