navbar-nav鏈接在不同的分辨率/媒體查詢中移動？

Question

我遇到問題，當我的網站在寬度爲768-889的分辨率中查看時，鏈接顯示爲以下內容;

我知道，通過使用媒體查詢，我可以解決這個，但是我不知道是哪個。

我知道它在平板媒體查詢中的最小和最大寬度如下所示。

我已經改變

.navbar-nav > li { 

字號，填充

並且還

.navbar .navbar-nav { 

字號，填充位置是：絕對;,對齊等

/* tablets */ 
@media (max-width: 991px) and (min-width: 768px) { 
    .slider-size { 
     height: auto; 
    } 
    .slider-size > img { 
     width: 80%; 
    } 
    .navbar-nav > li { 
     font-size; 14px; 

    .navbar .navbar-nav { 
     display: inline-block; 
     float: none; 
     vertical-align: top; 
} 

HTML根據要求..

<div id="container"> 
    <header class="clearfix"> 
      <div class="navbar navbar-default"> 

      <!-- Brand and toggle get grouped for better mobile display --> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 

           <i class="glyphicon glyphicon-resize-vertical" style="font-size: 16px;color:#04fa00"></i> 

         </button> 
          <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 style="max-width:100px; margin-top: -16px;" 
           src="/images/mainlogo.png"> 
    </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 navbar-right"> 
          <li><a href="index.html">HOME</a></li> 
          <li><a href="about.html">ABOUT</a></li> 
          <li><a href="services.html">SERVICES</a></li> 
          <li><a href="testimonals.php">TESTIMONALS</a></li> 
          <li><a href="gallery.php">GALLERY</a></li> 
          <li><a href="contact.php">CONTACT</a></li> 
          <li><a href="admin.php">ADMIN</a></li> 
         </ul> 
        </div><!-- /.navbar-collapse --> 
      </div><!-- /.navbar navbar-default --> 
    </header> 

任何幫助將不勝感激。我知道它很簡單：？

Answer 1

試試這個：

它很簡單！

刪除所有的CSS和使用：

a { 
    padding: 20px 10px 20px 10px !important; 
} 

.item { 
    text-align: center; 
    width: auto; 
} 

.bs-example { 
    margin: 10px; 
} 


.slider-size { 
    width: 100%; 
} 

.carousel { 
    width: 80%; 
    margin: 0 auto; /* center your carousel if other than 100% */ 
} 

/* Mobile */ 
@media (max-width: 767px) { 
    .slider-size { 
     height: 250px; 
    } 

     .slider-size > img { 
      width: 80%; 
     } 

    .navbar-default .navbar-nav > li > a { 
     line-height: 25px; 
    } 

    /* tablets */ 
    @media (max-width: 991px) and (min-width: 768px) { 
     .slider-size { 
      height: auto; 
     } 

      .slider-size > img { 
       width: 80%; 
      } 

     .navbar-default .navbar-nav > li > a { 
      padding: 30px 30px 30px 30px !important; 
     } 
    } 

    /* laptops */ 
    @media (max-width: 1023px) and (min-width: 992px) { 
     .slider-size { 
      height: 200px; 
     } 

      .slider-size > img { 
       width: 80%; 
      } 
    } 

    /* desktops */ 
    @media (min-width: 1024px) { 
     .slider-size { 
      height: 200px; 
     } 

      .slider-size > img { 
       width: 60%; 
      } 

     .navbar-default .navbar-nav > li > a { 
      line-height: 25px; 
     } 
    } 
} 

希望您的問題將得到解決！