Bootstrap Spalte Push-Pull versuchen Spalte nach oben verschieben

Ich versuche, eine "Teammitglied" Seite zu stylen: Bild rechts mit dem Namen & Rolle auf der linken Seite eines Bildes mit einer Biographie unten. Ich habe mein Layout für Mobilgeräte entworfen, und ich benutze Push/Pull, aber ich bekomme einen "Float" (obwohl ich denke, dass es so funktioniert, wie es beabsichtigt ist.) See Image.Bootstrap Spalte Push-Pull versuchen Spalte nach oben verschieben

<div class="container-fluid"> 
<div class="col-sm-8 col-sm-push-4"> 
    <div class="row"><h1>John Roberts</h1></div> 
    <div class="row"><h2>Chief Justice</h2></div> 
</div> 

<div class="col-sm-4 col-sm-pull-8 tmMbr_photoWithSocial"> 
    <img src="1200px-Official_roberts_CJ.jpg" class="tmMbr_photo img-rounded img-responsive" alt="Photo of Chief Justice John Roberts"> 
</div> 

<div class="tmMbr_bio col-sm-8 col-sm-push-4"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec egestas velit. Nulla convallis varius ex, eget iaculis elit mollis eu. In lobortis, nisi tincidunt blandit sagittis, diam nisl ornare felis, sit amet cursus ipsum risus vitae ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta ex rutrum, eleifend massa sit amet, tempus erat. Ut tincidunt lacus ac porttitor bibendum. Praesent consectetur lorem id euismod tincidunt. Maecenas ac fermentum mi, ut iaculis lorem. Nulla molestie hendrerit velit nec luctus. Cras fringilla sem sit amet lacus pellentesque, sodales venenatis augue blandit. Nunc a velit arcu.</p> 
    <p>Vivamus nec ex est. Quisque vel luctus massa. Quisque vitae ullamcorper tellus. Nunc consectetur id dui eu congue. Aliquam rutrum nunc quis lacus efficitur imperdiet. Aliquam eget mauris non sem egestas pellentesque. Phasellus sed venenatis risus, eu vehicula nulla.</p> 
</div>

Dieses korrekt ohne das Bild, Wraps, aber sobald man das jede Porträtbild laden, wird die ‚bio‘ Block scheint sich klar zu wollen. Ich habe versucht, die Elemente in Reihen zu verpacken usw. und habe die Hölle gesucht, aber das kann ich nicht herausfinden.

Eigentlich ziemlich komplett neu, ich schreibe hoffentlich für eine (CSS?) Lösung, aber auch um zu bestätigen, dass dieses Verhalten wie erwartet ist.

Quelle

2017-09-09 astn

Was Sie sehen, das richtige Verhalten von Bootstrap ist. '.col' Elemente schweben nach links. Wenn Sie 'push' und' pull' verwenden, fügen Sie nur linke und rechte Eigenschaften hinzu. Also, was Sie haben, ist das Bild div, das 4 Spalten ist und dann der Name div, was 8 ist. Das ist 12. Bootstrap arbeitet auf einem 12-Spalten-Raster, wenn Sie also das Bio-Div, das 8 ist, wird es löschen, weil die Gitter ist nicht mehr im Raum. Warum legst du die Bio-Absätze nicht mit Namen und Titel zusammen? Es sei denn, Sie möchten den Namen über dem Foto auf dem Handy. Wenn das der Fall ist, empfehle ich die Flexbox-Route. – disinfor

Sie könnten die float Eigenschaften auf den ersten col Elemente zurückgesetzt und die Push-Drop/Pull-Klassen hier nutzlos:

.tmMbr_bio.col-sm-8.fl-r, 
 
.col-sm-8.fl-r 
 
{ 
 
    float:right; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
<div class="col-sm-8 fl-r"> 
 
    <div class="row"><h1>John Roberts</h1></div> 
 
    <div class="row"><h2>Chief Justice</h2></div> 
 
</div> 
 

 
<div class="col-sm-4 tmMbr_photoWithSocial"> 
 
    <img src="http://dummyimage.com/600x700&text=Official_roberts_CJ.jpg" class="tmMbr_photo img-rounded img-responsive" alt="Photo of Chief Justice John Roberts"> 
 
</div> 
 

 
<div class="tmMbr_bio col-sm-8 fl-r"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec egestas velit. Nulla convallis varius ex, eget iaculis elit mollis eu. In lobortis, nisi tincidunt blandit sagittis, diam nisl ornare felis, sit amet cursus ipsum risus vitae ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta ex rutrum, eleifend massa sit amet, tempus erat. Ut tincidunt lacus ac porttitor bibendum. Praesent consectetur lorem id euismod tincidunt. Maecenas ac fermentum mi, ut iaculis lorem. Nulla molestie hendrerit velit nec luctus. Cras fringilla sem sit amet lacus pellentesque, sodales venenatis augue blandit. Nunc a velit arcu.</p> 
 
    <p>Vivamus nec ex est. Quisque vel luctus massa. Quisque vitae ullamcorper tellus. Nunc consectetur id dui eu congue. Aliquam rutrum nunc quis lacus efficitur imperdiet. Aliquam eget mauris non sem egestas pellentesque. Phasellus sed venenatis risus, eu vehicula nulla.</p> 
 
</div>

Quelle

2017-09-09 16:00:00

Bootstrap Spalte Push-Pull versuchen Spalte nach oben verschieben

Antwort

Verwandte Themen