Boostrap - Thumbnails, die reagieren und passen, wenn die Fenstergröße geändert wird

Question

Ich versuche, meine Thumbnails zu verschieben und den verfügbaren Platz anzupassen, wenn das Fenster in der Größe geändert wird. Die Vorschaubilder enthalten Bilder unterschiedlicher Größe und die erste Zeile scheint gut zu sein. Das erste Thumbnail der zweiten Zeile scheint jedoch dort zu beginnen, wo sich das längste Bild der ersten Zeile befindet.

Was ich möchte, ist das erste Thumbnail oder die zweite Zeile wäre genau unter dem ersten Daumen der oberen Reihe.

Alle Bilder haben die gleiche Breite.

Ein Bild sagt mehr als tausend Worte: https://snag.gy/JqgAIl.jpg

Dank alle!

<div className="col-lg-8"> 
    <div className="row"> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="87.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="26.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="25.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="34.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="99.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="12.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    </div> 
</div> 

Answer 1

Sie können dies mit CSS lösen, indem die float von Ihren Spalten an dem entsprechenden Haltepunkt zu löschen. Da sich Ihr Thumbnail-Layout nur unter col-md- * (speziell col-md-3) ändert, können Sie dies bei 992px unter Verwendung des Selektors nth-child tun, der auf die vierte Spalte angewendet wurde.

so die Expression 4n + 1 den ersten, fünften, neunten, dreizehnten, siebzehnten, einundzwanzigsten, entsprechen und so weiter, die Elemente, wenn sie

von Sitepoint existieren : Understanding :nth-child Pseudo-class Expressions und siehe nth-child tester für weitere Informationen.

Hier ist ein Arbeitsbeispiel von, wie es Ihr Layout scheint (Ich weiß, dass Sie ReactJS verwenden, aber das gleiche gilt).

Vorsicht: Achten Sie darauf, eine eindeutige Kennung verwenden, wenn diese zu Ihrem Raster anwenden, dass sie keinen anderen Teil von Ihnen Anwendung zu stören, die die gleiche Spalte Klasse verwendet werden können: im Beispiel .gallery mit dem verwendeten .row Div oder Sie können eine Klasse wie .item zu jeder Spalte einzeln hinzufügen und so weiter.

Beispiel

@media (min-width: 992px) { 
 
    .gallery .col-md-3:nth-child(4n+1) { 
 
    clear: left; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-lg-8"> 
 
     <div class="row gallery"> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>1</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>2</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem 
 
       Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>3</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>4</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>5</strong> Lorem Ipsum is simply dummy. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>6</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 

 
    <div class="col-lg-4"> 
 
     <strong>Side</strong> 
 
     <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
 
     industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the 
 
     printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
 
     ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
     </p> 
 
     <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
 
     industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the 
 
     printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
 
     ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
     </p> 
 
     <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
 
     industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the 
 
     printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
 
     ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
     </p> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

Versuchen jquery Masonary Plugin, ist es viel besser.

$('.row').masonry({ 
 
    // options 
 
    itemSelector: '.masonaryclass', 
 
    columnWidth: 200 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script> 
 
<div class="col-lg-8"> 
 
    <div class="row"> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x150" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x100" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x155" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x250" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x50" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x120" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    </div> 
 
</div>