如何使响应式连续两列？在第一个文本中，在引导程序4中的第二个图像中

时间：2019-01-08 06:14:26

标签： html css bootstrap-4

如何使Bootstrap 4中的两行连续显示，第一行显示文字，第二行显示图像以实现完全响应？我想像这张照片那样做：

window.location

enter image description here

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

4 个答案:

答案 0 :(得分：2)

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

看看这个。

由于引导程序使用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>

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

注意：如果您希望文本内容centered，请使用align-items:center;

答案 1 :(得分：0)

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

答案 2 :(得分：0)

将此添加到您的CSS 

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

这是工作中的小提琴https://jsfiddle.net/fk04wndL/

答案 3 :(得分：0)

希望这很有用。

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

相关问题
最新问题