close
梅問題．教學網

♣梅問題‧教學網【Minwt】♣

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

Posted: 10 Aug 2016 03:00 PM PDT

梅問題－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導覽列中選單自動齊左、齊右、居中
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 knoledge 的頭像
    knoledge

    討論

    knoledge 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄