Как сделать отзывчивые кнопки HTML и расположить их вместе на небольших разрешениях - PullRequest
Новая
       3

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

2 голосов
/ 20 марта 2020

На моем сайте в том же <div> у меня есть <span> с тремя кнопками. Вот как это выглядит в интерфейсе:

Это мой HTML: 

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding" style="padding-bottom:15px;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
        <span id="horaPantalla"></span>
        <i class="fa fa-cogs imgButton" aria-hidden="true"></i>
        <i class="fa fa-camera imgButton" aria-hidden="true" id="configScan"></i>
        <i class="fa fa-sign-out imgButton" aria-hidden="true""></i>
     </div> 
</div>

Если я получаю доступ с мобильного телефона, я получаю это:

enter image description here

Две кнопки находятся в первой строке, а другая - во второй.

Моя цель - совместить все три кнопки, если разрешение невелико, я хочу поместить все три кнопки в новый ряд ниже <span>.

. добавив класс с именем resolution к элементам <i>: 


.imgButton {
    font-size: 36px !important;
    /*padding: 2px;*/
    padding-bottom: 2px;
    cursor:pointer;
    background-color:#A3D1D4 !important;
    border:none !important;
}

@media screen and (max-width: 900px) {
  .resolution {
    float: none;
    width: 100%;
  }
}

Вот что я получаю:

enter image description here

Как можно Я поместил три <i> элемента на мобильных устройствах ниже <span>?

Ответы [ 2 ]

1 голос
/ 20 марта 2020

Вы можете обернуть значки в контейнер div и сделать интервал #hourPantella и контейнер div display: inline-block.

Например: 

.icon {
  width: 25px;
  height: 25px;
  border: 1px solid black;
  
  display: inline-block;
}

.date, .icon-container {
  display: inline-block;
}
<div class="date">Date - Time</div>
<div class="icon-container">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
</div>

И пример JSFiddle: https://jsfiddle.net/5a8o7ykd/.

Обратите внимание, что этот пример совсем не похож на тот, который вы показали , Я просто использовал теги-заполнители вместо реальных значков, и я фактически не помещал дату в промежуток. Вы должны иметь возможность адаптировать его для работы со своим кодом.

0 голосов
/ 20 марта 2020

Проверьте, хотите ли вы этого? 

@media (max-width: 900px) { 
  .block {
    display: block;
  }
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
    <span id="horaPantalla" class="block">Hour</span>
    <i class="fa fa-cogs imgButton" aria-hidden="true"></i>
    <i class="fa fa-camera imgButton" aria-hidden="true" id="configScan"></i>
</div>
...