Ich habe eine Fußzeile auf einer Bootstrap-Website, die 4 Elemente in Spalten in seiner Zeile hat - diese Anzeige ist korrekt auf Desktop-Bildschirmen.Bootstrap Footer Spalte/Zeile Problem
Für mobile Bildschirme möchte ich es ändern, um 2 Elemente anzuzeigen, mit den anderen 2 Elementen darunter - und die Formatierung von 1 Element ist alles verrückt.
Hier ist ein Bild der Fußzeile auf einem Desktop. 
Und hier ist ein Bild der Fußzeile für einen kleinen Bildschirm (dh mobile) 
In dem kleinen Bildschirm Bild sollte die „akkreditiert“ Bild sein etwas inline mit dem „Wir sind Sozial "Textzeilen und nicht darunter. Ive versucht, die Spaltengrößen zu ändern (dh: "Accredited" = Col-xs-7 & col-sm-7 und "Wir sind Social" = Col-xs-5 & col-sm-5), aber seine gemacht kein Unterschied.
irgendwelche Vorschläge, wo das Problem liegt?
Hier ist der HTML-Code für meine Fußzeile:
<!-- ========= 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]'>[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 © 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>
Und meine Seite wird mit dem 'Sticky-Footer' CSS für Bootstrap;
/* 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;*/
}
funktioniert perfekt, danke! :-) – BlissSol