iT邦幫忙

0

bootstrap5 文字大小 display-1?導覽列 (Navbar)

  • 分享至 

  • xImage

bootstrap5 文字大小 display-1

導覽列 (Navbar)中品牌logo, a標籤後navbar-brand 加上 display-1沒效果,我想是css權重問題???

display-1要怎麼改比較好?fs-1有效字會放大,display-1無效!

還是自己SCSS重寫,不用display-1??

display-1在h1是有效,但在NAV內是無效...

感謝回答

nav class="navbar fixed-top navbar-expand-lg navbar-dark ">
div class="container">
a class="navbar-brand display-1 text-success" href="#">logo
button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
span class="toggler-icon top-bar">
span class="toggler-icon middle-bar">
span class="toggler-icon bottom-bar">
/button>
div class="collapse navbar-collapse" id="navbarSupportedContent">
ul class="navbar-nav ms-auto mb-2 mb-lg-0 ">

                改成fs-1文字大小是有效
                a class="navbar-brand fs-1 text-success" href="#">logo
                
                想做滾動效果transition文字大小誇張效果,使用display-1
看更多先前的討論...收起先前的討論...
建議把整段CODE 貼上來,這樣會比較好判讀
我自己剛剛的測試是 display-1 權重大於 navbar-brand,所以樓主的問題應該是其他地方造成的,建議按 F12 看一下你的標籤載入了那些 CSS ,再去判斷哪些CSS有衝突導致無法出現樓主要的結果
基於樓主貼的CODE 很難判讀
這邊我弄到 CODEPEN 做一下效果
https://codepen.io/jonesleeinfo/pen/YzxjEeM
我看到的結果是 加了 display-1 字會小一級,也會沒有粗體字,所以樓主應該是誤會了什麼吧
ppp896 iT邦新手 4 級 ‧ 2021-11-11 10:05:56 檢舉
display-1字更大還有粗體....???
ppp896 iT邦新手 4 級 ‧ 2021-11-11 10:06:31 檢舉
font-size: calc(1.625rem + 4.5vw);
font-weight: 300;
line-height: 1.2;

所以我才看不懂
滾動效果,給個範例吧,一般都是加 hover 事件的CSS之後,滑鼠上去後就能放大或是改變CSS,透過變化來凸顯HOVER的效果,但是HOVER再行動裝置無效,只能在桌機上使用而已
ppp896 iT邦新手 4 級 ‧ 2021-11-11 10:13:14 檢舉
還沒滾動前,就如同您的範例,字很小也不像有粗體,開發者工具有font-weight: 300;但沒字體大小
ppp896 iT邦新手 4 級 ‧ 2021-11-11 10:19:00 檢舉
display-1是神奇的字體大小...看來是誤會....感謝回答
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答