Question

我正在寻找在屏幕最大宽度为414时在屏幕的整个宽度上均匀分布fa-icons的最佳方式，并隐藏导航栏品牌，因为当我使用hidden-xs时隐藏到700pt并且我想在414上完全隐藏它，并在Fa图标之间有均匀的空间

tab-icon {
  display: inline-block;
  margin-left: 15px;
  margin-right: 150px;
  vertical-align: middle;
  list-style: none;
  padding-right: 15px;
}
.tab-icon li {
  margin-left: 2.5vw;
  margin-right: 2.5vw;
 
}
.tab-icon li a{
  color: #000;
  margin-top: 50%;
  
  @media screen and (max-width: 414px) {
  .tab-icon li {
      margin-left: 7.5vw;
      margin-right: 7.5vh;
 
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar-header page-scroll">
                 <ul class="tab-icon pull-right list-inline hidden-lg">
                        <li><a class="fa fa-home fa-2x " href="#home"></a></li>
                        <li><a class="fa fa-handshake-o  fa-2x" href="#service"></a></li>        
                        <li><a class="fa fa-download fa-2x" href="#download"></a></li>
                        <li><a class="fa fa-car fa-2x" href="#chauffers"></a></li>
                </ul>
                
                <a class="navbar-brand page-scroll hidden-xs" href="#page-top">Logo</a>
            </div>

Answer 1

瞧，瞧，你可以这样做一个弹性箱。唯一的缺点是你不能使用Favicon图标，你必须使用图像，因为图像伸展，字体不会。

＆＃13;

.tab-icon {
   display: flex;
    align-items: stretch;
  
    flex-flow: row nowrap;
  width: 500px;
  list-style: none;
  
}

.tab-icon li {
   flex-grow: 1; 
  }

.tab-icon li img{
  width: 100%;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar-header page-scroll">
                 <ul class="tab-icon pull-right list-inline hidden-lg">
                        <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
                        <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>    
                        <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
                        <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
                </ul>
                
                <a class="navbar-brand page-scroll hidden-xs" href="#page-top">Logo</a>
            </div>

＆＃13;

媒体查询中导航栏中的Fa-icon distrubution

1 个答案: