时间戳

首页 > 解决方案 > 我需要一些帮助，这个页脚没有我想要的响应

html - 我需要一些帮助，这个页脚没有我想要的响应

问题描述

这是我在前端不太好的代码所以我正在寻找使此页脚响应的小触摸链接和字体可怕的图标在移动屏幕上出现问题没有响应或如果屏幕发生变化则位置发生变化

<div class="jumbotron" style="margin-bottom: 0px; background-color: #f4f4f4;height:100%;">
<div>
    <hr style="border-top:3px solid #bc2f8d; float: left;margin-left: 30px; margin-top: -15px; text-align: left;"  width="30%">
    <hr style="border-top:3px solid #bc2f8d; float: right;margin-right: 30px; margin-top: -15px; text-align: right;"  width="30%">
</div>
<h3 class="text-center" style="margin-top:0;">Bahget Dar <i class="fas fa-home" style="color:#BC2F8D"></i></h3>
<h5 class="text-center" style=";color:black;">make your home best.</h5>
<h5 class="text-center" style="color: #0d0d0d"> contact us at <strong>011175697903</strong></h5>
<div class="icon-bar" style="text-align: right;width: 200px;margin-right: 120px; font-size: 25px; float: right">
    <h5 style="margin-right: 19px;">Follow us</h5>
    <a href="https://www.facebook.com"><i class="fab fa-facebook-f" style="background:#f4f4f4;color: #3B5998; "></i></a>
    <a href="https://www.instgram.com"><i class="fab fa-instagram" style="color: transparent;background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);background:-webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);background-clip: text;-webkit-background-clip: text;"></i></a>
    <a href="https://wwww.twitter.com"><i class="fab fa-twitter" style="color:#0095ff;text-shadow: 1px 1px 1px #ccc;"></i></a>
</div>

<div class="row" style="float: unset;margin-top:8px;margin-left: 10px; margin-right: 0; max-width: 200px;" >
    <div class="col-sm-4 text-left" >
        <ul style="list-style: none;">
            <li style="text-decoration: none; width:90px;margin-left: 49px;"><a style="color:black;">Contact Us</a></li>
            <li  style="width: 40px;margin-left: 49px;"><a style="color: black">Products</a></li>
            <li  style="width: 40px;margin-left: 49px;"><a style="color: black">About</a></li>
        </ul>
    </div>
</div>
<h6 class="text-center" style="position: relative;margin-bottom: -34px;">Copyright &copy; <strong><a>M.Nabih</a></strong></h6>

链接和 fontawsome 图标没有响应

标签： htmlcss

解决方案

请看这篇文章https://www.w3schools.com/html/html_responsive.asp这将帮助您理解响应式设计，特别是使用宽度和边距的百分比。

我修复了您的代码，现在应该按照您的需要响应，由于类名，字体真棒图标没有显示。

<div class="jumbotron" style="margin-bottom: 0px; background-color: 
#f4f4f4;height:100%;">
<div>
<hr style="border-top:3px solid #bc2f8d; float: left;margin-left: 30px; 
 margin-top: -15px; text-align: left;"  width="30%">
<hr style="border-top:3px solid #bc2f8d; float: right;margin-right: 30px; 
 margin-top: -15px; text-align: right;"  width="30%">
</div>
<h3 class="text-center" style="margin-top:0;">Bahget Dar <i class="fa fa-home" style="color:#BC2F8D"></i></h3>
<h5 class="text-center" style=";color:black;">make your home best.</h5>
<h5 class="text-center" style="color: #0d0d0d"> contact us at 
<strong>01111111111</strong></h5>
<div class="icon-bar" style="text-align: right;width: 49%;margin-right: 8%; font-size: 25px; float: right">
 <h5 style="margin-right: 12px;">Follow us</h5>
 <a href="https://www.facebook.com"><i class="fa fa-facebook-f" style="background:#f4f4f4;color: #3B5998; "></i></a>
 <a href="https://www.instgram.com"><i class="fa fa-instagram" style="color: transparent;background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);background:-webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);background-clip: text;-webkit-background-clip: text;"></i></a>
   <a href="https://wwww.twitter.com"><i class="fa fa-twitter" style="color:#0095ff;text-shadow: 1px 1px 1px #ccc;"></i></a>
  </div>

   <div class="row" style="float: unset;margin-top:8px;margin-left: 1%; margin-right: 0; max-width: 49%;min-width: 130px;" >
    <div class="col-sm-4 text-left" >
    <ul style="list-style: none;padding-left: 0px;">
        <li style="text-decoration: none; margin-left: 20%;"><a style="color:black;">Contact Us</a></li>
        <li  style=" margin-left: 20%;"><a style="color: black">Products</a> 
        </li>
        <li  style=" margin-left: 20%;"><a style="color: black">About</a> 
        </li>
        </ul>
       </div>
      </div>
    <h6 class="text-center" style="position: relative;margin-bottom: -34px;">Copyright &copy; <strong><a>M.Nabih</a></strong></h6>

推荐阅读