html - Bootstrap 3 导航栏居中菜单

Question

我在主菜单中使用以下 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>

我想知道是否有人可以解决我的问题。

Answer 1

您可以尝试在主菜单上放置一个 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;
    }
}

如果您注意到，它们都有类名 navbar-nav，这意味着它们都受到样式的影响，尤其是 float:none，它否定了 pull-right