Bootstrap導覽列Navbar中的選單自動齊左、齊右、居中

梅問題-Bootstrap教學-Navbar導覽列中選單自動齊左、齊右、居中
  Bootstrap內建了許多的互動特效,且完全無須寫到任何的javascript,只要善用html的標籤,與Bootstrap內建的類別樣式,就可以滿足RWD網頁編排的需求,而今天要分享一個相當常用的特效,那就是導覽列選單,而內建就可將導覽列中的選單齊左、齊右,但有時因版型的規畫,也會有居中的需求,因此這時要如何讓導覽列中的選單居中呢?其實方法也很簡單,現在就一塊來看看,如何讓Bootstrap導覽列中的選單,齊左、齊右、居中。

Step1
當要齊右時,只需在navbar-nav的ul中加入navbar-right
梅問題-Bootstrap教學-Navbar導覽列中選單自動齊左、齊右、居中
Step2
這時選單就會向右靠齊。
梅問題-Bootstrap教學-Navbar導覽列中選單自動齊左、齊右、居中
Step3
當要齊左時,再將原來的改成navbar-left
梅問題-Bootstrap教學-Navbar導覽列中選單自動齊左、齊右、居中
Step4
這時選單就向左靠齊。
梅問題-Bootstrap教學-Navbar導覽列中選單自動齊左、齊右、居中
Step5
但要居中時,就得自己手動來加工一下,而作法也很簡單,將下方的CSS樣式加入後,再分別將navbar-collapse-center、navbar-center,加到指定的標籤中,就可實現在導覽列中的選單居中啦!
nav居中樣式:
.navbar-center {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar-collapse-center {
  text-align: center;
}
梅問題-Bootstrap教學-Navbar導覽列中選單自動齊左、齊右、居中
Step6
這時選單就變居中啦!
梅問題-Bootstrap教學-Navbar導覽列中選單自動齊左、齊右、居中

相關文章

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

2017 (二月講座)

2017 (一月講座)

更多講座