Rumah > Artikel > hujung hadapan web > Bagaimana untuk Memusatkan Pautan Navigasi Navbar Bootstrap Twitter?
Navbar Twitter Bootstrap menawarkan penyelesaian praktikal untuk navigasi tapak web. Walau bagaimanapun, kadangkala anda mungkin mahu menyesuaikan penampilannya, seperti memusatkan pautan navigasi.
Mengubah suai penjajaran bar navigasi memerlukan beberapa kod CSS. Walau bagaimanapun, beberapa kaedah mungkin tidak memberikan hasil yang diinginkan. Mari kita teroka pendekatan yang betul.
Untuk memusatkan item menu nav, tetapkan sifat paparannya kepada sekatan sebaris dan bukannya apungan: kiri. Ini akan membolehkan item dijajarkan secara mendatar tanpa melanggar reka letak. Selain itu, tetapkan sifat penjajaran teks bekas dalam bar navigasi ke tengah.
<code class="css">.navbar .nav, .navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .navbar-inner { text-align: center; }</code>
Jika anda mempunyai berbilang bar navigasi pada halaman web anda, adalah disyorkan untuk membuat kelas CSS khusus untuk menyasarkan bar navigasi khusus yang anda mahu pusatkan. Ini akan menghalang kesan yang tidak diingini pada bar navigasi lain.
<code class="html"><div class="navbar navbar-fixed-top center"> <div class="navbar-inner"> .... </div> </div></code>
<code class="css">.center.navbar .nav, .center.navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .center .navbar-inner { text-align: center; }</code>
Perlu diperhatikan bahawa CSS di atas juga akan menjejaskan item submenu, menyebabkan item tersebut turut dipusatkan . Jika anda lebih suka item submenu dijajarkan ke kiri, tambah gaya berikut:
<code class="css">.center .dropdown-menu { text-align: left; }</code>
Lihat demo langsung di: http://jsfiddle.net/C7LWm/show /
Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Pautan Navigasi Navbar Bootstrap Twitter?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!