手機菜單：顯示內嵌的最後4個位置

我正在使用引導程序框架。我有下面的代碼在我的CSS文件：手機菜單：顯示內嵌的最後4個位置

@media (max-width: 768px) { 

    .navbar-default .navbar-nav > li > a { 
    width: 100%; 
    border-bottom: 1px solid #3d3d3d; 
    text-align: center; 
    }

HTML文件的一部分：

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </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"> 
     <li class="active"><a href="#">HOME<span class="sr-only">(current)</span></a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">NEWS</a></li> 
     <li><a href="#">CONTACT</a></li> 
     </ul> 

     <!-- SOCIAL ICONS --> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></li> 
     <li class="youtube"><a href="#"><i class="fa fa-youtube"></i></a></li> 
     <li class="twitter"><a href="#"><i class="fa fa-twitter"></a></i></li> 
     <li class="facebook"><a href="#"><i class="fa fa-facebook"></a></i></li> 
     </ul> 
     <!-- /SOCIAL ICONS --> 


    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container --> 
</nav>

因此，當被顯示在移動電話上的頁面我的菜單是這樣的：

enter image description here

現在，我想在內部顯示最後4個列表項，並在它們之間填充，因此它們均勻地顯示爲一行中的正方形。

我的問題是，我該怎麼做？

來源

2015-06-29 Marek

您首先分離.navbar，然後選擇最後一個ul（其中包含有問題的項目），選擇項目li並以25％的寬度向左浮動。你也可以使用display:inline-block，但是因爲它們在HTML中分開行，所以最終可能會出現一些「錯誤」間距。

.navbar ul:last-of-type li{ 
    float:left; 
    width:25%; // or whatever dimensions you require, padding etc 
}

來源

2015-06-29 09:18:50 SW4

感謝您快速解決方案！作品完美，完美地解釋！不過，我還有一個問題：是否可以禁用現在可見的水平滾動？ – Marek

@media（max-width：768px）{ \t .navbar-collapse { \t \t \t overflow-x：hidden; \t}修正了這個問題 – Marek

-2

使用表而不是無序列表。像

<table > 
    <tr> 
    <td class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></td> 
    <td class="youtube"><a href="#"><i class="fa fa-youtube"></i></a></td> 
    <td class="twitter"><a href="#"><i class="fa fa-twitter"></a></i></td> 
    <td class="facebook"><a href="#"><i class="fa fa-facebook"></a></i></td> 
    </tr> 
</table>

您可以使用CSS來指定寬度和填充和保證金，無論你喜歡改變TD的屬性，你可以得到你的想法。

來源

2015-06-29 09:17:02

將一個類添加到社交圖標ul。

例 - 在這裏，我補充說：「social_icons_list」類

<ul class="nav navbar-nav navbar-right social_icons_list"> 
    <li class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></li> 
    <li class="youtube"><a href="#"><i class="fa fa-youtube"></i></a></li> 
    <li class="twitter"><a href="#"><i class="fa fa-twitter"></a></i></li> 
    <li class="facebook"><a href="#"><i class="fa fa-facebook"></a></i></li> 
    </ul>

添加下面的CSS媒體查詢CSS。

 .social_icons_list li {float:left; width:25%;}

來源

2015-06-29 09:25:08

向聆聽者添加新類，例如，「社交圖標」

.social-icons { 
    width: 25%; 
    display: inline-block; 
}

該工作，如果您使用休息和邊框，否則刪除填充/邊距或播放的寬度。

希望這有助於

來源

2015-06-29 09:25:44 AbeCodes

-1

@media (max-width: 768px) { 
    ul.nav li { 
     float:left; width:25%; 
    } 
}

來源

2015-06-29 10:39:50

手機菜單：顯示內嵌的最後4個位置

回答

相關問題