html - 响应式页脚 html

Question

我用 html、css 和 bootstrap 制作了一个页脚，它对某种程度的响应有反应，但是当它达到移动尺寸而不是图像排成一行时，它们会堆叠起来并排在一列中，我该如何解决这个问题？我希望我在移动尺寸时与在桌面尺寸时相同。我希望你能理解，抱歉我的英语不好。这是 html:

  /*Facebook*/

.fb-icon img {
  width: 60px;
  height: 60px;
  display: block;
  margin: auto;
}


/*Twitter*/

.twitter-icon img {
  width: 60px;
  height: 60px;
  display: block;
  margin: auto;
}


/*Mail*/

.mail-icon img {
  width: 60px;
  height: 60px;
  display: block;
  margin: auto;
}

.container {
  margin-top: 120px;
  width: 30%;
}

@media (max-width: 767px) {
  /*Facebook*/
  .fb-icon img {
    width: 70px;
    height: 70px;
    display: block;
    margin: auto;
    padding: 5px;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<footer class="container">
  <div class="row">
    <!-- Facebook -->
    <div class="col-sm-4 col-xs-4">
      <a target="_blank" class="fb-icon" href="https://www.facebook.com/OxybinTravel"><img onmouseover="this.src='Travel/facebook-2-color.png'" onmouseout="this.src='Travel/facebook-2.png'" alt="Facebook icon" src="Travel/facebook-2.png"></a>
    </div>
    <!-- Twitter -->
    <div class="col-sm-4 col-xs-4">
      <a target="_blank" class="twitter-icon" href="https://twitter.com/oxybintravel"><img onmouseover="this.src='Travel/p-color.png'" onmouseout="this.src='Travel/p.png'" alt="Twitter icon" src="Travel/p.png"></a>
    </div>
    <!-- Mail -->
    <div class="col-sm-4 col-xs-4">
      <div class="tool-tip">
        <a target="_blank" class="mail-icon" href="#"><img onmouseover="this.src='Travel/email-color.png'" onmouseout="this.src='Travel/email.png'" alt="Mail icon" src="Travel/email.png"></a>
      </div>
    </div>
  </div>
</footer>

Answer 1

默认情况下，如果您检查您的 bootstrap，您会看到 bootstrap 在移动设备上使用 col-sm-4 并且有一个 max-width: 100% css属性(property)。只需将这个 css 片段添加到您的 media query

@media (max-width: 767px) {
  /*Facebook*/

  .col-sm-4 {
    max-width:33.3%;
    display:inline-block;
  }
....
}