html - 如何使连续两列响应？在第一个文本中，在 bootstrap 4 中的第二个图像中

Question

如何在 Bootstrap 4 中使两列连续，一列带有文本，第二列带有图像以实现完全响应？我想制作类似这张图片的东西:

<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>

enter image description here

如何使图像始终具有与带文本的 div 相同的参数，以实现完全响应？

Answer 1

将图像宽度设置为100%，这样它就不会溢出到下一个 block 。

看看这个。

由于 bootstrap 使用 display:flex，div row 内的所有 block 都将具有相同的高度。

.col-md-6 img{width:100%;}

   <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> 

还有一个代码笔:https://codepen.io/Ev1tw1n/pen/GPGvmd

注意:如果你想让文本内容居中使用align-items:center;