响应式页脚html

Posted 2023-03-21

【中文标题】响应式页脚html

【英文标题】：Responsive footer html

【发布时间】：2018-05-14 20:36:25

【问题描述】：

我用 html、css 和 bootstrap 制作了一个页脚，它对某种 exctent 有响应，但是当它达到移动尺寸而不是图像连续排列时，它们会堆叠并排成一列，我该如何解决这个问题?我希望我在移动设备大小时与在桌面大小时一样。我希望你能理解，对不起我的英语不好。这是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'"  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'"  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'"  src="Travel/email.png"></a>
      </div>
    </div>
  </div>
</footer>

【参考方案1】：

默认情况下，如果您检查您的引导程序，您将看到引导程序在移动设备上使用col-sm-4 并且具有max-width: 100% css 属性。只需将剪切的这个 css 添加到您的 media query

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

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

【讨论】：

这行得通，但现在他们相互进入并相互重叠

@Linus col-sm-4 覆盖了col-xs-4，所以如果你想在小型设备上使用col-4，最好的方法是完全删除col-sm-4 你没有'不需要它，该代码仅适用于 col-xs-4 。像那样` `

使用 col-xs-4 而不是 col-sm-4 你不需要两者都需要

@Linus 你用的是什么版本的引导程序？

尝试将图像的 css 从 bootstrap 更改为 img-responsive 类的相同 css