Bootstrap 4 Alpha 6 Flexbox reaktions Probleme

-1

... ich die neuen Bootstrap 4 Flexbox Gitter seine ÜberprüfungBootstrap 4 Alpha 6 Flexbox reaktions Probleme

https://v4-alpha.getbootstrap.com/utilities/flexbox/

Und ich habe einige Fragen zu diesem Thema ... Ich versuche zu verstehen, wie die in Reaktion Flexbox verwenden Klassen von Bootstrap erstellt ... ich habe so etwas wie dies:

<div id="start" class="d-flex flex-row justify-content-center"> 
       <img src="img/logocolor.gif" class="img-fluid" alt="Responsive image"> 

       <div class="card border-0"> 
        <div class="card-block"> 
          <h4 class="card-title text-center">DERMATOCOSMATR&Iacute;A PROFESIONAL</h4> 
          <p class="card-text">Somos un equipo multidiciplinario que se encarga de atender y solucionar las inquietudes<br> y necesidades del paciente desde un punto de vista integral; cl&iacutenico y cosm&eacutetico.</p> 
          <a href="#" class="card-link">Another link</a> 
        </div> 
       </div> 
     </div>

Und es funktioniert auf Desktop-Gerät ... aber wenn ich versuche, meine Seite auf kleinere Geräte wie Mobiltelefon zu sehen ich versuche, ... zu verwenden für Beispiel ... die reaktionsfähige Klasse für kleine Größe "flex-sm-wrap" b Es passiert nichts auf kleiner Sicht ... aber die Änderungen passieren auf der Desktop-Größe !!! Ich verstehe nicht, warum es die Klassen nimmt, die auf kleinen Geräten funktionieren sollten, und sie werden auf Desktop-Größe verwendet ... es ist sehr verwirrend .... Wie soll ich die Klassen für jede Gerätegröße angeben? Mi objetive ist ein reaktionsfähiges Web mit diesem bootstrap 4 flexbox grid. Vielen Dank für Ihre Hilfe!

Quelle

2017-01-20 Mr Dynamite

Können Sie eine Geige für diese erstellen? Oder machen Sie einfach einen Screenshot von dem genauen Ziel? – claudios

ok @claudios hier ist es .... https: //jsfiddle.net/f5kx4bhe/ ... das Ergebnis in dieser Geige ist, wie es sein sollte auf Zell-Gerät mit "flex-sm-wrap" ... aber das ist passiert auf dem Desktop-Gerät –

@Ragner haben Sie eine Lösung gefunden? – ZimSystem

Die Fiddle ist defekt, da Bootstrap nicht richtig enthalten ist. Anstatt die Flexbox-Dienstprogramme zu verwenden, ist es möglicherweise einfacher, das gewünschte Layout mit dem Flexbox-Raster (Zeilen und Spalten) zu erhalten.

<div id="start" class="row"> 
     <div class="col-md-6 text-center"><img src="http://lorempixel.com/output/animals-q-c-640-480-5.jpg" class="img-fluid" height="100" alt="Responsive image"></div> 
     <div class="col-md-6"> 
      <div class="card border-0"> 
       <div class="card-block"> 
        <h4 class="card-title text-center">DERMATOCOSMATRÍA PROFESIONAL</h4> 
        <p class="card-text">Somos un equipo multidiciplinario que se encarga de atender y solucionar las inquietudes 
         <br> y necesidades del paciente desde un punto de vista integral;</p> 
        <a href="#" class="card-link">Another link</a> 
       </div> 
      </div> 
     </div> 
    </div>

Hier ist ein Codeply Demo (Bootstrap 4 Alpha 6 ausgewählt) ..

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

Quelle

2017-01-22 14:06:13 ZimSystem

Bootstrap 4 Alpha 6 Flexbox reaktions Probleme

Antwort

Verwandte Themen