html - 手机菜单 : Display last 4 positions inline

Question

我正在使用 Bootstrap 框架。我的 css 文件中有以下代码:

@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>

因此，当页面显示在手机上时，我的菜单将如下所示:

现在，我想以内联方式显示最后 4 个列表项，并在它们之间进行填充，以便它们在一行中均匀显示为正方形。

我的问题是，我该怎么做？

Answer 1

您首先隔离 .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
}