bootstrap中的nav-right内容不适合ipads

Question

导航栏右侧的内容在iPad中看不到，但在网页中可见。

我试图为此添加一个CSS

 /* iPads (portrait and landscape) ----------- */
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body { 
        width: 495px; 
    }
     .navbar-fixed-top,
     .navbar-fixed-bottom,navbar-right {
      position: fixed;
      margin-left: 0px;
      margin-right: 0px;
   }
}  

但这并没有带来任何改变

我是Bootstrap的新手，请帮助我以最佳方式解决。

<div id="head-nav" class="navbar navbar-default navbar-fixed-top" >
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="fa fa-gear"></span>
        </button>
        <a class="navbar-brand" href="#"><span><img src="../images/imagesj/logotype.png" 
         alt="enviroManager" width="144"></span></a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">        
          <li class="dropdown">
            <a href="<c:url value="/enviro/home.htm"  />" class="dropdown-toggle" 
            data-toggle="dropdown"><fmt:message key="homeMenu" /> <b class="caret"></b></a>
      <ul class="dropdown-menu col-menu-2">
        <li class="col-sm-6 no-padding">
          <ul>
           <li class="dropdown-header"><i class="fa fa-eye"></i><fmt:message key="menu.views" /></li>
          <li><a href="<c:url value="/enviro/dashboard.htm" />">Dashboard</a></li>          
         <li><a href="<c:url value="/system/groupList.htm" />">Groups</a></li>
         <li><a href="<c:url value="/system/userQueryForm.htm" />">Users</a></li>           
          </ul>
        </li>
        <li  class="col-sm-6 no-padding">
          <ul>
         
         <li><a href="<c:url value="/system/moduleList.htm" />">Modules</a></li>
         <li><a href="<c:url value="/system/userDomainList.htm" />">User Domains</a></li>
         <li><a href="<c:url value="/system/licenceList.htm" />">Licences</a></li>
         <li><a href="<c:url value="/system/questionList.htm" />">Questions</a></li>
          <li><a href="<c:url value="/system/changeLog.htm" />">Software Change Log</a></li>         
          </ul>
        </li>
      </ul>
          </li>
          
         
          
        
    <ul class="nav navbar-nav navbar-right user-nav" >
      <li class="dropdown profile_menu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
       <img alt="Avatar" src="../images/imagesj/avatar2.jpg" /><span><c:out value="${uName}"/></span> 
       <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">My Account</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Messages</a></li>
          <li class="divider"></li>
          <li><a href="<c:url value="/logout"/>">Sign Out</a></li>
        </ul>
      </li>
    </ul>		
    
     <ul class="nav navbar-nav navbar-right user-nav">
      <li class="dropdown profile_menu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe"></i>
        <span>&nbsp; Languages </span> <b class="caret"></b></a>       
        <ul class="dropdown-menu">
        <li><a href="#">Current Locale : ${pageContext.response.locale}</a></li>
         <li class="divider"></li>
          <li><a href="<c:out value="${landingPage}" />?language=en">English</a></li>
          <li><a href="<c:out value="${landingPage}" />?language=span">Spanish 
          <span class="flag-icon flag-icon-es"></span></a></li>
          <li><a href="<c:out value="${landingPage}" />?language=fr">French 
          <span class="flag-icon flag-icon-fr"></span></a></li>
          <li><a href="<c:out value="${landingPage}" />?language=zh_CN"> Chinese 
          <span class="flag-icon flag-icon-cn"></span></a></li>          
        </ul>
      </li>
    </ul>
      </div>
      
    </div>
  </div>