我在 Bootstrap 网站上有一个页脚,该网站的行列中有 4 个元素 - 此显示在桌面屏幕上正确。
对于移动屏幕,我希望将其更改为显示 2 个元素,其他 2 个元素位于此下方 - 并且 1 个元素的格式都很奇怪。
在小屏幕图像中,“认可”图像应与“We’re Social”文本行有些内嵌,而不是在其下方。 我尝试更改列大小(即:使“Accredited”= 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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e010808070d0b2e011e0b0006011b1d0b0d070d40011c09400f1b" rel="noreferrer noopener nofollow">[email protected]</a>'><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08f8686898385a08f90858e888f959385838983ce8f9287ce8195" rel="noreferrer noopener nofollow">[email protected]</a></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/146218711@N02" 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 © 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>
我的网站正在使用 Bootstrap 的“Sticky-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;*/
}
最佳答案
您需要使用 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>
关于html - Bootstrap页脚列/行问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42276856/