Question

这是代码，在前端效果不佳，因此我正在寻找使该页脚具有响应能力的细微接触链接和字体令人讨厌的图标在手机屏幕上有问题屏幕无响应或位置改变

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

the links and fontawsome icons is not responsive

Answer 1

请查看这篇文章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>

我需要此页脚中的一些帮助，但我没有响应

1 个答案: