如何制作响应式 HTML 按钮并在小分辨率下将它们放在一起

Question

在我的同一个 <div> 网站中，我有一个带有三个按钮的 。这是它在前端的样子：

这是我的 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>

如果我从手机访问 phone 我得到了这个：

第一行有两个按钮，第二行有另一个按钮。

我的目标是将所有三个按钮放在一起，如果分辨率很小我想将所有三个按钮放在  下方的新行中。

我通过向  元素添加一个名为 class 的解析来尝试以下操作：


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

这是我得到的：

如何在移动设备上将三个  元素内嵌在  下方？

Answer 1

看看这是不是你想要的？

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

Answer 2

您可以将图标包装在容器中 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/。

请注意，此示例与您展示的不完全相同。我只是使用占位符 divs 而不是实际的图标，我实际上并没有在跨度中输入日期。不过，您应该能够调整它以使用您的代码。

如何制作响应式 HTML 按钮并在小分辨率下将它们放在一起

How to make responsive HTML buttons and position them together on small resolutions

html

css

responsive