0
我在我的主菜單中使用了以下html。Bootstrap 3 navbar居中菜單
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header" style="margin:0;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#"><img src="//<?=SITEURL;?>/templates/harrower/images/logo.png" alt="Harrower.XYZ"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<?php
foreach($menu as $item){
if(empty($item['submenu'])){
if(MongoId::isValid ($item['task']) == 1)
{
$link = self::fetch_link($item['task']);
}
else
{
$link = array();
$link['url'] = $item['task'];
}
?>
<li <?php if('URI_1' == $link['url']){echo 'class="active"';}?>><a href="//<?=SITEURL;?>/<?=$link['url'];?>"><?=$item['title'];?></a></li>
<?php
}
else
{
if(MongoId::isValid ($item['task']) == 1)
{
$link = self::fetch_link($item['task']);
}
else
{
$link = array();
$link['url'] = $item['task'];
}
?>
<li class="dropdown
<?php if(URI_1 == $link){
echo ' active';
}?>
">
<a href="//<?=SITEURL;?>/<?=$link['url'];?>" class="dropdown-toggle" data-toggle="dropdown"><?=$item['title'];?><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<?php
foreach($item['submenu'] as $submenu)
{
if(MongoId::isValid ($submenu['task']) == 1)
{
$link = self::fetch_link($submenu['task']);
}
else
{
$link = array();
$link['url'] = $submenu['task'];
}
?>
<li
<?php
if(URI_1 == $link){
echo 'class="active"';
}
echo '><a href="//'; print SITEURL."/".$link['url']; echo'">';
print $submenu['title'];
echo '</a></li>';
}
?>
</ul>
</li>
<?php
}
}
?>
</ul>
<ul class="nav navbar-nav nav-pills navbar-right" id="socialnetwork">
<li><a href="#"><div class="socialnetwork youtube"></div></a></li>
<li><a href="#"><div class="socialnetwork twitter"></div></a></li>
<li><a href="#"><div class="socialnetwork facebook"></div></a></li>
<li><a href="#"><div class="socialnetwork gplus"></div></a></li>
</ul>
</div>
</div>
</nav>
現在我想讓主菜單UL（下面的代碼）居中。
<ul class="nav navbar-nav">
<?php
foreach($menu as $item){
if(empty($item['submenu'])){
if(MongoId::isValid ($item['task']) == 1)
{
$link = self::fetch_link($item['task']);
}
else
{
$link = array();
$link['url'] = $item['task'];
}
?>
<li <?php if('URI_1' == $link['url']){echo 'class="active"';}?>><a href="//<?=SITEURL;?>/<?=$link['url'];?>"><?=$item['title'];?></a></li>
<?php
}
else
{
if(MongoId::isValid ($item['task']) == 1)
{
$link = self::fetch_link($item['task']);
}
else
{
$link = array();
$link['url'] = $item['task'];
}
?>
<li class="dropdown
<?php if(URI_1 == $link){
echo ' active';
}?>
">
<a href="//<?=SITEURL;?>/<?=$link['url'];?>" class="dropdown-toggle" data-toggle="dropdown"><?=$item['title'];?><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<?php
foreach($item['submenu'] as $submenu)
{
if(MongoId::isValid ($submenu['task']) == 1)
{
$link = self::fetch_link($submenu['task']);
}
else
{
$link = array();
$link['url'] = $submenu['task'];
}
?>
<li
<?php
if(URI_1 == $link){
echo 'class="active"';
}
echo '><a href="//'; print SITEURL."/".$link['url']; echo'">';
print $submenu['title'];
echo '</a></li>';
}
?>
</ul>
</li>
<?php
}
}
?>
</ul>
爲了得到那個工作我不得不添加
@media (min-width: 768px){
.navbar-nav{
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
}
}
但是因爲這個導航欄有兩個UL與第二個重點是社交網絡（見下面的代碼），我也想沒有上面的代碼就可以正常工作，但只要我添加上面的代碼，而上面的菜單居中，社交網絡菜單就會被推到下面。這不是我所希望的感覺。
<ul class="nav navbar-nav nav-pills navbar-right" id="socialnetwork">
<li><a href="#"><div class="socialnetwork youtube"></div></a></li>
<li><a href="#"><div class="socialnetwork twitter"></div></a></li>
<li><a href="#"><div class="socialnetwork facebook"></div></a></li>
<li><a href="#"><div class="socialnetwork gplus"></div></a></li>
</ul>
我想知道是否有人有任何解決我的問題。
你能張貼圖片，展示你想如何看起來像OR Plunker還是jsfiddle？ – balfonso