如果响应模式图标无法正常显示

Question

  

嗨，我在响应方面有问题。当它是响应模式时，我需要在一行中显示4个图标。就像网络模式一样。请帮忙。我在图像中添加了代码。

Answer 1

您需要添加@media CSS。试试这个

@media screen and (max-width: 767px){
  .icons-parent-elements-class{
   display:inline-block;
   width:25%;
   float:left;
  }
}

Answer 2

要实现此目的，必须将每个元素的宽度更改为元素数除以100％。例如：

{{1}}

Answer 3

HTML：-

<div class="container">
    <div class="div1">
            <img src="pathnameofimage.png">

        </div>
        <div class="div2">
            <img src="pathnameofimage.png">

        </div>
        <div class="div3">
            <img src="pathnameofimage.png">

        </div>

对于移动屏幕，请使用

CSS：-

 @media(max-width: 767px){
    .container{
    display:flex;
    justify-content:center;
    flex-direction:column;
    }
    }

Answer 4

@media(max-width: 767px){
  .nav-tabs.first li {
    width: 25%;
    margin: 0;
    float: left;
    padding-right: 8px !important;
  }
            
  .nav-tabs.first li a img {
    width: 100%;
    max-width: 80px !important;
    height:  auto!important;
    margin: 0 auto;
    display: inline-block;
  }
}

请尝试一下。如果不起作用，请分享您的代码。并从图片标签中删除高度和宽度。这些在响应式视图中造成了问题。