移动 phone 菜单：内联显示最后 4 个位置

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>

因此，当页面显示在移动设备上时 phone 我的菜单将如下所示：

现在，我想内联显示最后 4 个列表项，它们之间有填充，这样它们就可以在一行中均匀地显示为正方形。

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

Answer 1

使用 table 而不是 uunordered list 。喜欢

<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 的属性，将宽度、填充和边距指定为您喜欢的任何内容，您可以获得您想要的内容。

Answer 2

您首先隔离 .navbar，然后 select 最后 ul（其中包含有问题的项目），select 项目 li并以 25% 的宽度向左浮动。您也可以 display:inline-block，但是由于它们在您的 HTML 中位于不同的行上，您最终可能会有一些 'erroneous' 间距。

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

Answer 3

添加一个 class 到社交图标 ul。

示例- 我在这里添加了 "social_icons_list" class

    <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%;}

Answer 4

向列表元素添加一个新的 class，例如"social-icons"

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

应该可以，如果你使用休息和边框，否则删除 padding/margin 或调整宽度。

希望这对您有所帮助

Answer 5

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

移动 phone 菜单：内联显示最后 4 个位置

Mobile phone menu: Display last 4 positions inline

html

css

inline

list

twitter-bootstrap