Bootstrap Footer列/行問題

我在Bootstrap網站上有一個頁腳，在其行中有4列，這個顯示在桌面屏幕上正確顯示。Bootstrap Footer列/行問題

對於手機屏幕，我希望它將其更改爲顯示2個項目，其他2個項目在此之下 - 並且1個項目的格式都是扭曲的。

這是桌面上的頁腳圖像。

而這裏的頁腳的一個小屏幕上的圖像（即：移動）

在小屏幕形象，「認可」的形象應該有點內嵌在「我們是社會「文字的線條，而不是它的下面。我試圖改變列大小（即：使「已認證」= col-xs-7 & col-sm-7和「We're Social」= col-xs-5 & col-sm-5）沒有不同。

關於問題出在哪裏的任何建議？

下面是我的頁腳的HTML代碼：

<!-- ========= START FOOTER ========== --> 
<footer class="footer"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-6 col-lg-3"> 
     <a href="http://www.acnc.gov.au/" target="_blank"> 
     <img class="img-responsive center-block" src="images/ACNC-Charity-Logo.png" alt="ACNC Charity" width="150" height="150"></a> 
     </div> 

     <div class="col-xs-6 col-sm-6 col-lg-3 text-center"> 
     <h4><strong>Contact Us</strong></h4> 
     <ul class='list-unstyled'> 
      <li><i class='glyphicon glyphicon-globe'></i> 67-71 Strathallan Rd, Macleod, Victoria</li> 
      <li><i class='glyphicon glyphicon-phone'></i> (03) 9450 7600</li> 
      <li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:[email protected]ic.org.au'>[email protected]</a></li> 
     </ul> 
     </div> 

     <div class="col-xs-6 col-sm-6 col-lg-3 text-center"> 
     <h4><strong>We're Social</strong></h4> 
     <ul class='list-unstyled'> 
      <li><a href="https://www.facebook.com/openhousecic/" target="_blank">Facebook</a></li> 
      <li><a href="https://www.youtube.com/channel/UClFV3cZ3_e4u3O0zEmYun3w" target="_blank">YouTube</a></li> 
      <li><a href="https://www.linkedin.com/company/open-house-cic" target="_blank">LinkedIn</a></li> 
      <li><a href="https://www.flickr.com/photos/[email protected]" target="_blank">Flickr</a></li> 
     </ul> 
     </div> 

     <div class="col-xs-6 col-sm-6 col-lg-3"> 
     <!--<div class="blank-gap-20"></div>--> 
     <a href="http://www.qip.com.au/" target="_blank"> 
     <img class="img-responsive center-block" src="images/QIP-logo.png" alt="QIP logo" width="150" height="83"></a> 
     </div> 
    </div> <!-- End Row --> 

    <div class="row"> 
     <div class="col-sm-12 col-md-12 text-center"> 
     <span>Open House Christian Involvement Centres &copy; 2017 : Website by <a href="http://www.bliss.net.au" target="_blank">Bliss</a></span> 
     <div class="blank-gap-10"></div> 
     <p><i>We acknowledge and pay respect to the Traditional Owners of the lands upon which Open House Christian Involvement Centres are situated.</i><p> 
     </div> 
    </div> <!-- End row --> 
    </div> <!--- End Container --> 
</footer>

我的網站使用的是「粘頁腳」 CSS的引導;

/* Sticky footer styles 
-------------------------------------------------- */ 
html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 330px; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    padding-top: 10px; 
    /* Set the fixed height of the footer here */ 
    height: auto; 
    min-height:200px; 
    background-color: #f1eeee; 
    color: #333 
    /*color: #f9f9f9;*/ 
}

來源

2017-02-16 BlissSol

您需要使用responsive reset作爲列不同的高度，因爲內容是每一列。這是一個similar question。

<div class="row"> 
     <div class="col-xs-6 col-sm-6 col-lg-3"> 
     .. 
     </div> 
     <div class="col-xs-6 col-sm-6 col-lg-3 text-center"> 
     .. 
     </div> 
     <div class="visible-sm visible-xs clearfix"></div> 
     <div class="col-xs-6 col-sm-6 col-lg-3 text-center"> 
     .. 
     </div> 
     <div class="col-xs-6 col-sm-6 col-lg-3"> 
     .. 
     </div> 
</div>

http://www.codeply.com/go/m5nWYTYa4H

來源

2017-02-16 14:38:55 ZimSystem

運行完美，謝謝！ :-) – BlissSol

Bootstrap Footer列/行問題

回答

相關問題