Dev Faq
0
votes

Comment faire deux colonnes réactives d'affilée? Dans le premier texte, en deuxième image dans Bootstrap 4

Comment faire deux colonnes d'affilée, une avec du texte, une seconde avec une image dans Bootstrap 4 pour être réactive? Je veux faire quelque chose comme dans cette image:

p> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class='container'>
    <div class='row'>
        <div class='col-md-6'>
            <div class='text'>
                <h2>Test test</h2>
                <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
            </div>
        </div>
        <div class='col-md-6'>
            <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
        </div>
     </div>
     <div class='row'>
         <div class='col-md-6'>
             <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
         </div>
         <div class='col-md-6'>
             <div class='text'>
                 <h2>Test test</h2>
                 <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
             </div>
         </div>
     </div>
</div>

4 commentaires

Voulez-vous que ce soit la même hauteur?

Définir img {largeur: 100%; }

Oui, même hauteur pour div.text et image

Ajoutez ceci dans votre CSS img {max-largeur: 100%;}

4 Réponses :

2
votes

Définir la largeur de l'image sur 100% code> de sorte qu'elle ne sera pas débordée sur le bloc suivant.

Vérifiez ceci. P>

puisque BOOTSTRAP utilise : flex code> Tous les blocs à l'intérieur de la ligne DIV code> auront la même hauteur. p>

p> 

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <div class='container'>
    <div class='row'>
    <div class='col-md-6'>
    <div class='text'>
    <h2>Test test</h2>
    <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
    </div>
    </div>
    <div class='col-md-6'>
    <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    </div>
    <div class='row'>
    <div class='col-md-6'>
    <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-md-6'>
    <div class='text'>
    <h2>Test test</h2>
    <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
    </div>
    </div>
    </div>
    </div>

2 commentaires

Et si je vais donner au rembourrage pour mon texte pour être plus élégant dans un div? Si je vais donner un rembourrage pour mon texte, le DIV avec du texte sera supérieur à DIV avec IMG

Vous pouvez les aligner au centre à l'aide d'Align-items: Centre; Ou définissez la hauteur manuelle à l'image et utilisez Object-Fit: Cover à l'image de sorte que l'image ne soit pas étirée!

0
votes

Ajouter une classe IMG-Fluid aux deux images.

ou vous pouvez utiliser le support de bootstrap 4 vérifier ci-dessous le lien. Merci. P>

https://getbootstrap.com/docs/ 4.0 / Mise en page / média-objet / p>

p> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class='container'>
<div class='row'>
<div class='col-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
<div class='col-md-6'>
<img class="img-fluid" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<img class="img-fluid" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
<div class='col-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
</div>
</div>

0 commentaires
0
votes

Ajouter ceci à votre CSS 

img{
  min-width:100%;
  min-height:100%;
  max-height:100%;
  max-width:100%;
}

0 commentaires
0
votes

J'espère que ceci est utile.

p> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <style>
	.img-section{
    	width:100%;
        height:400px;
    }
    .text {
        height: 380px;
    }
</style>
<div class='container'>
  <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
  </div>
    <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
  </div>
    <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
  </div>
    <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Test test</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
  </div>
</div>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor