我在主菜单中使用以下html。
<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>
我想知道是否有人对我的问题有任何解决方案。
答案 0 :(得分：0)
您可以尝试在主菜单上添加ID或添加其他类名，并将其用作选择器以将样式放在...
<nav id="myMainNav" class="navbar navbar-default" role="navigation">
然后在你的CSS上你放了这个..
@media (min-width: 768px){
#myMainNav{
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
}
}
如果你注意到，他们都有classname navbar-nav，这意味着他们都受到样式的影响，特别是浮动：没有否定右拉