web-dev-qa-db-fra.com

Avoir des vignettes avec différentes tailles d'images Bootstrap

J'aimerai avoir une vignette avec des images de différentes tailles et différentes quantités de texte. Mais je veux qu'ils aient tous la même taille. Comme ceci exemple du site Bootstrap .

Voici le code que j'ai en ce moment, avec un démo sur jsFiddle .

J'ai différentes tailles d'images, donc cela se casse. Est-ce possible avec Bootstrap?

<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <h3>
            Fading a RGB LED on BeagleBone Black
        </h3><img src="https://learn.adafruit.com/system/guides/images/000/000/322/medium310/overview_web.jpg?" alt="Sample Image">
        <div class="caption">
            <p>In this tutorial, you will learn how to control the color of an RGB LED using a BeagleBone Black and Python.</p>
        </div>
    </div>
</div>
<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <h3>
            Measuring Light with a BeagleBone Black
        </h3><img src="https://learn.adafruit.com/system/guides/images/000/000/316/medium310/overview_web.jpg?" alt="Sample Image">
        <div class="caption">
            <p>In this tutorial, you will learn how to connect a photoresistor to a BeagleBone Black. The tutorial can also be used for other resistive sensors such as FSRs or SoftPots.</p>
        </div>
    </div>
</div>
jqueryhtmlcsstwitter-bootstrap
18
Diego

Vous pouvez y parvenir en définissant les dimensions de vos conteneurs.

par exemple dans votre élément conteneur (.thumbnail), définissez des dimensions spécifiques à suivre comme:

.thumbnail{        
    width: 300px; 
    // or you could use percentage values for responsive layout
    // width : 100%;
    height: 500px;
    overflow: auto;
}

.thumbnail img{
    // your styles for the image
    width: 100%;
    height: auto;
    display: block;
}

et ainsi de suite avec les autres éléments.

ÉCHANTILLON

24
reuelab

Vous pouvez accomplir cela avec CSS sur la balise img.

img {
    width: 200px;
    height: 200px;
}

ou en ligne sur chaque balise img comme celle-ci

<img style="width: 200px; height: 200px" src="https://learn.adafruit.com/system/guides/images/000/000/339/medium310/overview_web.jpg" alt="Sample Image">
4
sfletche

Vous devez configurer la hauteur de ces colonnes. Par exemple, nous avons la même quantité de texte, donc il a la même hauteur pour chaque div.

1
monkeyinsight

Voici ma solution, j'espère qu'elle vous aidera!

  <style type="text/css">
  .row{
    display: flex;
   flex-wrap: wrap;
  }
  .row>[class="col-sm-6 col-md-4"]{
    display: flex;
    flex-direction: column;
  }
</style>
0
Nguyễn Mạnh Hà