Question

嘿，伙计们在调整屏幕大小/移动设备时，我的页脚有问题。我的页脚文本位于左侧，我的脚本被诽谤。我附上了我的代码，我希望在桌面上保持相同的布局，但是当屏幕缩小时，页脚文本与布局对齐，但保持相同的文本样式，以便uls和li对齐文本-align：左;

https://s32.postimg.org/glxnik7gl/footer.png

            <footer>
            <div class="container" id="contact">

            <div class="row">
                    <div class="col-sm-3">  
                        <a class="navbar-brand" href="#"><span class="logo-text-footer">Company Logo</span></a>
                    </div>

                <div class="col-sm-3">  
                    <ul>Quick Links</ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Services</li>
                    <li>Contact</li>
                </div>

                <div class="col-sm-3">  
                    <ul>Address</ul>
                    <li>1234 Example Street </li>
                    <li>City</li>
                    <li>State</li>
                    <li>55555</li>
                </div>

                <div class="col-sm-3">      
                    <li>Call: 555-555-5555</li>
                    <li>E-Mail: example@gmail.com</li>
                    <div class="social-icons">
                        <li>Facebook</li>
                        <li>YouTube</li>
                        <li>Instagram</li>
                        <li>Twitter</li>
                    </div>
                </div>      
            </div>  

                <div class="row">
                    <div class="privacy">
                        <p><?php echo date("Y"); ?> Company Name | All Rights Reserved</p>
                    </div>
                </div>  


            </div>
            </footer> 



            /* Footer */
            footer {
              height: auto;
              background:#3a526a;
            }
            footer #contact {
                height: auto;
                min-height: 13em;
            }

            footer .contact-text {
              position:relative;
              top:20em;
            }
            span.logo-text-footer {
              color:#fff;
              font-size: 30px;
             vertical-align: top;
             position: absolute; 
             bottom:15px;

            }
            footer #contact ul {
              font-size:17px;
              color:#fff;
              text-transform:uppercase;
              font-family: 'Myriad Pro';
              padding:0;
            }

            footer #contact li {
              color:#fff;
              list-style:none;
              font-family: 'Myriad Pro';
              padding-top: 5px;
            }

            footer .social-icons li {
            display:inline-block;

            }
            footer .privacy {
              height: 50px;
              background:#455e76;

            }

            footer .privacy p {
              color:#fff;
              text-align:center;
              display: block;
              margin: auto;
              line-height:50px
            }

Answer 1

在页脚中添加text-center类。在每个div中将col-sm-3类更改为col-md-3 col-sm-12。由于这是针对移动视图，请添加以下CSS：

@media (max-width: 768px) {
  footer {
    text-align: center;
  }
  .navbar-brand {float:none;}
}

点击此处jsFiddle。

Answer 2

引导程序中的对齐非常简单，只需要了解一些类名称text-center以使对齐位于中心位置text-right以使对齐位置正确，text-left以进行对齐在左侧位置。

在您的代码中，您使用的是ul和li，但要进行自适应设计以避免ul和li。因此，您始终只能使用div。

在引导程序中居中页脚文本

2 个答案: