分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了页脚在网站上显示为垂直，但在我的 VScode 实时服务器上正确显示。我需要将页脚中的内容显示为 Row，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决页脚在网站上显示为垂直，但在我的 VScode 实时服务器上正确显示。我需要将页脚中的内容显示为 Row？

开发过程中遇到页脚在网站上显示为垂直，但在我的 VScode 实时服务器上正确显示。我需要将页脚中的内容显示为 Row的问题如何解决？下面主要结合日常开发的经验，给出你关于页脚在网站上显示为垂直，但在我的 VScode 实时服务器上正确显示。我需要将页脚中的内容显示为 Row的解决方法建议，希望对你解决页脚在网站上显示为垂直，但在我的 VScode 实时服务器上正确显示。我需要将页脚中的内容显示为 Row有所启发或帮助；

用于页脚的 HTML

@H_616_4@

  `<Strike> <div class= "footer2">   
    <div class="container">
        <div class="row">
            <div class="footer-col-1">
                <h3>Download Our App</h3>
                <p>Download App for AndroID and ios mobile phone.</p>
                <div class="app-logo">
                    <img src="https://blah blah.png">
                    <img src="https://blah blah.png">
                </div>
            </div>
            <div class="footer-col-2">
                <img src="https://blah blah.png">
                <p>We're Committed To HelPing You Become The<br>Best Version Of Yourself</p>
            </div>
            <div class="footer-col-3">
                <h3>USEFul linkS</h3>
                <ul>
                    <li>PASSIVE INCOME</li>
                    <li>SIDE HUSTLES</li>
                    <li>disCOVERIES</li>
                    <li>WORKSPACE</li>           
                </ul>
            </div>
            <div class="footer-col-4">
                <h3>GET IN touch</h3>
                <ul>
                    <li> <img src="https:blah blah.png">730 3rd Ave NY 10017,USA</li>
                    <li> <img src="https:blah blahs.png">talk2us@blah blah.com</li>
                    <li>Return Policy</li>
                    <li>Contact Us</li>                      
                </ul>
            </div>
            <div class="icons">
            <hr>
            <p class="copyright">copyright 2021 - blah blah </p>
        </div>
    </div>
 </Strike>`

页脚的 CSS

@H_616_4@

 `<Strike> .footer2{
              BACkground: #000;
              color: #8a8a8a;
              Font-size: 14px;
              padding: 60px 0 20 px;
           }
           .footer2 p{
              color: #8a8a8a;
           }
           .footer2 h3{
              color:#fff;
              margin-bottom: 20px;
           }
           .footer-col-1,.footer-col-2,.footer-col-3,.footer-col-4{
              min-wIDth: 250px;
              margin-bottom: 20px;
           }
           .footer-col-1{
              flex-basis: 30%;
           }
           .footer-col-2{
              flex: 1;
              text-align: center;
          }
          .footer-col-2 img{
             wIDth: 180px;
             margin-bottom: 20px;
          }
          .footer-col-3,.footer-col-4{
             flex-basis: 12%;
             text-align: center;
          }
          .ul{
              List-style-type: none;
          }
           </Strike>`