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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何连续响应两列？在第一个文本中，在bootstrap 4中的第二个图像中相关的知识，希望对你有一定的参考价值。

如何连续两列，一个带文本，第二个带有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相同的参数，以完全响应？

答案

将图像宽度设置为100%，以便它不会溢出到下一个块。

看看这个。

由于bootstrap使用display:flex，所以div row中的所有块都具有相同的高度。

.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>
另一答案

将img-fluid类添加到两个图像中。

或者你可以在下面的链接检查引导媒体4。谢谢。

https://getbootstrap.com/docs/4.0/layout/media-object/

<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>
另一答案

将此添加到您的CSS

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

这是一个工作小提琴https://jsfiddle.net/fk04wndL/

另一答案

希望这很有用。

<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.g
以上是关于如何连续响应两列？在第一个文本中，在bootstrap 4中的第二个图像中的主要内容，如果未能解决你的问题，请参考以下文章
 

 如何对两列求和并通过减去它们的聚合 SQL 和 C# 在第三列中显示结果？


 如何使双列表格响应第二列在第一列之下？


 bootstrap 4 响应式表单，包含带有图像的两列部分


 使用顺风 css 的两列之间的响应式分隔器


 如何根据每条记录的连续表单中 ms-access 中的其他值填充文本框上的值


 如何在 CSS 中对齐两列文本