iT邦幫忙

0

Bootstrap5 導覽列置中

  • 分享至 

  • xImage

各位大神好~第一次發問{排版不佳,請見諒)

想請問BS5元件器的導覽列可以用置中嗎?

困擾滿久的..

想解決導覽列置中的問題!!! 小弟自學網頁設計,有諸多問題想請教,請各位大神 提點提點。謝謝

#補更
https://ithelp.ithome.com.tw/upload/images/20230107/20156731fEvBV0kH7F.jpg
這是程式碼
https://ithelp.ithome.com.tw/upload/images/20230107/20156731i7EZVb9Bry.jpg
這是大版面 需要把LOGO與項目一起置中(未解決)
https://ithelp.ithome.com.tw/upload/images/20230107/201567314MkmxZZwa8.jpg
這是RWD版面 LOGO置中(未解決)

是需要寫CSS來調嗎?

增廣建文 iT邦研究生 5 級 ‧ 2023-01-07 00:45:25 檢舉
猜你要類似這種的吧
https://mdbootstrap.com/how-to/bootstrap/navbar-center/
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1

認真來說,其實所有的元件都可以用置中。
你會有此一問,其實也就代表你對於排版並不是很清楚了解。

而且也不太清楚你所謂置中的意思是什麼。
畢竟,沒程式碼,沒圖。
這樣所謂的置中有非常多種解釋。

最好還是將問題問清楚一點,這樣人家才好對你的問題回答清楚。
能提供畫面或程式碼。就算不會解釋,至少高手還能從你給的程式碼了解一些問題。

2
小哈片刻
iT邦研究生 4 級 ‧ 2023-01-07 03:02:00

因為Nav元件的display是flex,所以要置中很簡單,你可以在Nav裏的元件,最前和最後各加一個flex:1的div就好了。

範例
https://codesandbox.io/s/bootstrap-5-test-forked-g2qswg?file=/index.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <div style="flex: 1;"></div>
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
          >Disabled</a
        >
        <div style="flex: 1;"></div>
    </div>
</nav>

我要發表回答

立即登入回答