Wie ändert man dynamisch die Elementausrichtung?

Question

Was ich versuche zu tun:
Ich erstelle eine Seite Fußzeile mit HTML, Css und Bootstrap. Wenn die Seite auf einem Desktop geöffnet ist, sieht es wie folgt aus (das ist, was ich will):

Aber wenn die Webseite die minimale Breite erreicht hat, sieht es wie folgt aus:

aber ich möchte, dass es so etwas wie dies aussehen, wenn die Web-Seite wurde auf die minimale Breite verringert worden:

Problem/Was ich versuchte:
So habe ich Probleme mit zwei Dingen.
Problem 1: Ich kann anscheinend keine Lösung finden, bei der ich sowohl die Bilder als auch den Text zentrieren kann, sobald kein Platz mehr für die Seite ist.

Problem 2: Ich kann keine Lösung finden, bei der ich die Größe des schwarzen Jumbotrons gleich behalte und der Text daran hindert, aus dem unteren Rand zu fließen.

Ich habe versucht, eine Tabelle zu erstellen (mit Text anstelle der Bilder, um es zu testen). Ich dachte, wenn ich die Elemente in eine Tabelle mit den Bildern in der Spalte ganz links und dem Text in der Spalte ganz links zentrierte, dann würden die Spalten gestapelt und die Elemente zentriert werden, wenn die Tabelle klein genug wäre. Aber ich konnte das nicht zur Arbeit bringen.

Ich habe auch versucht, zwei kleinere Jumbotrons innerhalb der größeren hinzuzufügen. Eine, die die Bilder enthält und eine, die den Text enthält. Aber ich konnte die Bilder nicht richtig zentrieren, und es gibt immer noch ein Problem mit dem Text, der aus der Unterseite des schwarzen Jumbotrons herausfließt.

Was mache ich falsch, und wie kann ich tun, was ich versuche mit CSS und HTML zu tun? Wenn Javascript die einzige Lösung ist, stört es mich nicht, ich benutze es einfach nicht viel.

Code:

Hier ist mein HTML:

<div class="container"> 
    <div class = "grid"> 
     <div class="row"> 
      <div class="jumbotron" id="footerJumbotron"> 
       <img src="ContactImages\facebookLogo.png" id="facebookLogo"> 
       <img src="ContactImages\twitterLogo.png" id="twitterLogo"> 
       <img src="ContactImages\youtubeLogo.png" id="youtubeLogo"> 
       <p id="footerFont">&copy; 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p> 
      </div> 
     </div> 
    </div> 
</div> 

Hier mein CSS ist:

#facebookLogo{ 
float:left; 
width:30px; 
height:30px; 
margin:5px; 
} 

#twitterLogo{ 
float:left; 
width:40px; 
height:30px; 
margin:5px; 
} 

#youtubeLogo{ 
float:left; 
width:40px; 
height:25px; 
margin:5px; 
} 

#footerFont{ 
float:right; 
color:white; 
font-size:10px; 
padding-top:10px;padding-bottom:10px; text-align:right; 
} 

#footerJumbotron{ 
background-color:black;border-radius: 0 !important; 
height:100px !important;padding-top:30px; 
} 

Answer 1

Sie können dies tun mit Bootstrap-Raster und Medien-Anfragen DEMO

@media(min-width: 768px) { 
    .custom-row p { 
    text-align: right; 
    } 
} 
@media(max-width: 768px) { 
    .custom-row { 
    text-align: center; 
    } 
} 

Answer 2

etwas aussortiert, das dann bearbeitet werden kann.

http://codepen.io/simondavies/pen/jqjgxL

HTML

<footer> 
    <div class="footer-social-wrapper"> 
     <div class="social-wrapper"> 
     <div class="social-icons"><div class="facebook"></div></div> 
     <div class="social-icons"><div class="twitter"></div></div> 
     <div class="social-icons"><div class="youtube"></div></div> 
    </div> 
    </div> 
    <div class="footer-copy"> 
     <p>&copy; 2016 Company Name. All Rights Reserved.</p> 
    </div> 
    </footer> 

CSS:

body {margin:0;padding:0;} 
    footer, 
    .social-wrapper { 
    margin: 0 auto; 
    padding: 0; 
    width: 100%; 
    height: auto; 
    position: relative; 
    height: 50px; 
    } 
    footer:before, 
    .social-wrapper:before, 
    footer:after, 
    .social-wrapper:after { content: " "; display: table;} 
    footer:after, 
    .social-wrapper:after {clear: both;} 

    .footer-social-wrapper { 
    margin:0; 
    padding: 0; 
    position: relative; 
    float: left; 
    width: 30%; 
    } 

    .footer-copy { 
    margin:0; 
    padding:0; 
    position: relative; 
    float: left; 
    width: 70%; 
    height: 50px; 
    } 
    .footer-copy { 
    text-align: right; 
    } 

    .social-wrapper .social-icons { 
     margin: 0px; 
     position: relative; 
     float: left; 
     width: 33.333%; 
     height: auto; 
    } 

    .social-wrapper .social-icons .facebook { 
     margin: 0 auto; 
     background:blue; 
     width: 40px; 
     height: 40px; 
    } 
    .social-wrapper .social-icons .twitter { 
     margin: 0 auto; 
     background: red; 
     width: 40px; 
     height: 40px; 
    } 
    .social-wrapper .social-icons .youtube { 
    margin: 0 auto; 
     background: yellow; 
     width: 40px; 
    height: 40px; 
    } 

    @media(max-width:700px){ 
    .footer-social-wrapper, 
    .footer-copy { 
     margin: 0 auto; 
     width: 100%; 
     text-align: center; 
    } 
    } 

ohne Rahmen arbeiten wie Bootstrap usw.

Answer 3

Innen jumbotron, erstellen Sie ein anderes Element contentWrapper und stellen Inhalte innerhalb dann fügen Sie eine Medienabfrage für ein es. Sie müssen width und margin: auto einstellen, um es zentriert zu machen.

Versuchen Sie, die Fensterbreite auf unter 800 Pixel zu ändern, und Sie sehen, dass der Inhalt in der Mitte ausgerichtet ist.

#facebookLogo{ 
 
    float:left; 
 
    width:30px; 
 
    height:30px; 
 
    margin:5px; 
 
} 
 

 
#twitterLogo{ 
 
    float:left; 
 
    width:40px; 
 
    height:30px; 
 
    margin:5px; 
 
} 
 

 
#youtubeLogo{ 
 
    float:left; 
 
    width:40px; 
 
    height:25px; 
 
    margin:5px; 
 
} 
 

 
#footerFont{ 
 
    float:right; 
 
    color:white; 
 
    font-size:10px; 
 
    padding-top:10px;padding-bottom:10px; text-align:right; 
 
} 
 

 
#footerJumbotron{ 
 
    background-color:black;border-radius: 0 !important; 
 
    height:100px !important;padding-top:30px; 
 
} 
 

 
@media (max-width: 800px) { 
 
    .contentWrapper{ 
 
    width: 400px; 
 
    margin: auto; 
 
    } 
 
}

<div class="container"> 
 
    <div class = "grid"> 
 
    <div class="row"> 
 
     <div class="jumbotron" id="footerJumbotron"> 
 
     <div class="contentWrapper"> 
 
      <img src="ContactImages\facebookLogo.png" id="facebookLogo"> 
 
      <img src="ContactImages\twitterLogo.png" id="twitterLogo"> 
 
      <img src="ContactImages\youtubeLogo.png" id="youtubeLogo"> 
 
      <p id="footerFont">&copy; 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

In Bootstrap 4 Sie können nur die ansprechende Ausrichtung Klassen verwenden, so etwas wie text-xs-center text-sm-left, auch Ihr Code ist stark repetitiven, betrachten etwas wie folgt aus:

#footerJumbotron img { 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 5px; 
 
} 
 

 
#footerFont { 
 
    color: white; 
 
    font-size: 10px; 
 
} 
 

 
#footerJumbotron { 
 
    background-color: black; 
 
    border-radius: 0 !important; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="grid"> 
 
    <div class="row"> 
 
     <div class="container-fluid jumbotron" id="footerJumbotron"> 
 
     <div class="col-sm-6 text-sm-left"> 
 
      <img src="ContactImages\facebookLogo.png" id="facebookLogo"> 
 
      <img src="ContactImages\twitterLogo.png" id="twitterLogo"> 
 
      <img src="ContactImages\youtubeLogo.png" id="youtubeLogo"> 
 
     </div> 
 
     <div class="col-sm-6 text-sm-right"> 
 
      <p id="footerFont">&copy; 2016 Company Name. All Rights Reserved. 
 
      <br> Built &amp; Managed by Company Name</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

jsFiddle: https://jsfiddle.net/azizn/veyytd6u/

* keine Notwendigkeit, eine feste Höhe einstellen, wenn Ihre Fußzeile wird dynamisch sein (in mobilen, wenn es zwei Reihen sind, muss die Höhe, so verlassen ändern sie automatisch)

* betrachten die & in HTML = Flucht>&