Когда значки адаптивного режима не приходят должным образом - PullRequest
Новая
       6

Когда значки адаптивного режима не приходят должным образом

0 голосов
/ 19 сентября 2018

enter image description here

Привет, у меня проблема с отзывчивым.Когда это адаптивный режим, мне нужно 4 иконки в одной строке.То же, что и в веб-режиме.Пожалуйста помоги.Я добавил код в изображение. 

<ul class="nav nav-tabs first"> 

<li class="active" style="padding-right: 15px;"> 
<a href="#Mala" data-toggle="tab"> 
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/Malaicon.png" alt="" width="144" height="144"> 
<br>Mala Connect</a></li> 

<li style="padding-right: 15px;">
<a href="#LaalsaApp" data-toggle="tab"> 
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/laalsaappicon.png" alt="" width="144" height="144"> 
<br>Laalsa App</a></li>
</ul>

<li style="padding-right: 15px;">
<a href="#Toran" data-toggle="tab"> 
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/toranicon.png" alt="" width="144" height="144"> 
<br>Toran</a></li>
</ul>

<li style="padding-right: 15px;">
<a href="#Web" data-toggle="tab"> 
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/webicon.png" alt="" width="144" height="144"> 
<br>Web</a></li>
</ul>

Ответы [ 4 ]

0 голосов
/ 19 сентября 2018 

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

пожалуйста, попробуйте.если не работает то поделитесь пожалуйста своим кодом.а также уберите высоту и ширину из тега изображения.это создает проблему в отзывчивом представлении.

0 голосов
/ 19 сентября 2018

Для этого вам необходимо изменить ширину каждого элемента на количество элементов, деленное на 100%.например: 

@media (min-width: 750px){
  .icons-parent-elements-class {
     width: 25%;
     display: inline-block;
     float: left;
  }
}
0 голосов
/ 19 сентября 2018

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;
    }
    }
0 голосов
/ 19 сентября 2018

Вам необходимо добавить @media css.Попробуйте это 

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