Question

This is my Full screen menu on 1080p display

问题是我遇到了720P显示屏上的额外线路，任何人都可以告诉它为什么会发生这种情况？这是我的代码

  <div class="collapse navbar-collapse" id="myNavbar1">

    <ul id="main" class="nav nav-tabs nav-justified" style="background-color: #F7F7F7;color:white">
      <?php
              $pages = array('home.php');
              if(in_array($pageName,$pages)){
                 $mainActive = 'active';
                 $inactive='';
                 $color='';
              }
              else
              {
                $mainActive = ''; 
                $inactive='inactive';
                $color='style="color:white"';
              }
            ?>
      <li class="<?php echo $mainActive?>" style="border-right:1px solid;border-radius: 5px;background-color: #31b0d5;"><a class="<?php echo $inactive?>" href="home.php" <?php echo $color; ?>>Home</a></li>
 <?php
              $pages = array('calendar.php');
              if(in_array($pageName,$pages)){
                $mainActive = 'active';
                $inactive='';
                $color='';
              }
              else
              {
                $mainActive = '';
                $inactive='inactive';
                $color='style="color:white"';
              }
      ?> 

      <li class="<?php echo $mainActive; ?>" style="border-right:1px solid;border-radius: 5px;background-color: #31b0d5;"><a class="<?php echo $inactive?>" href="calendar.php" <?php echo $color; ?>>My Schedules</a></li>
// and so on all other menu items have similar styling   
</ul>
</div>

Answer 1

由于锚文本变为多行，您可以将文本垂直中间对齐<li>块。

我添加以下css：

.nav-tabs.nav-justified>li {
  vertical-align: middle;
}

.nav-tabs.nav-justified>li>a {
  border: 0!important;
}

您可能还需要修改您的php，我将<li>更改为background-color: white。

这是jsfiddle： https://jsfiddle.net/urmf4ejf/

导航栏上的不相关线路菜单Boostrap

1 个答案: