Bootstrap Layout Suggestions for 50 50 layout with Image and Text

Question

寻找使用引导程序创建 50 50 拆分布局的建议。一侧图像，另一侧文本。文本侧应始终保持图像的相同大小/高度。文本侧应保持垂直居中。

任何建议都会很棒。谢谢

Layout Example

Answer 1

我做了一个 CodePen 你可以看这里 https://codepen.io/andrea-garza/pen/jOBXdjY

以下是 HTML。如果您更喜欢使用固定宽度的容器，只需将“container-fluid”替换为“container”即可。 div 类“mycontent”在桌面和平板电脑上查看时，我在文本的左侧和右侧添加了一些填充，但在手机上删除了填充。类 class="photo" 是背景图像。 CSS 有图像的 url，将其更改为您的图像源。背景设置为覆盖该区域并具有随着浏览器折叠而变化的最小高度，只需在 CSS 中编辑 min-height 即可。

<div class="container-fluid">
<div class="row flex-row">
<div class="col-md-6 d-flex align-items-center mycontent">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur libero nisi, posuere ac placerat convallis, imperdiet at libero. Sed vitae nibh molestie nisl bibendum finibus mollis tincidunt dui. Morbi quis purus non lectus rutrum finibus ut a mi. Nullam feugiat tortor nec ultrices aliquam. Fusce sed auctor ex. Sed sapien risus, commodo rutrum augue mattis, rutrum dapibus ex. Suspendisse at posuere magna. Fusce a magna vitae enim dignissim pellentesque. Mauris cursus et elit ac congue. Fusce luctus eget ante a interdum. Nunc malesuada imperdiet lectus eu placerat. Pellentesque aliquet neque orci, non malesuada mi convallis at.</p> 
</div><!-- end col -->
  
<div class="col-md-6 photo">
 <!-- nothing goes here its just a photo but you could if you wanted to -->  
</div><!-- end col -->
  
</div><!-- end row -->
</div><!-- end container -->

下面是对应的CSS

.mycontent {
  padding:0 4%;
}

.photo {
  background: url(https://images.pexels.com/photos/4894421/pexels-photo-4894421.jpeg) no-repeat;
  background-size:cover;
  min-height:500px;
  background-position: 50% 50%;
}

@media screen and (max-width: 768px) {
  .photo {min-height:350px;}
  .mycontent {padding:0 4%;}
}

@media screen and (max-width: 480px) {
  .photo {min-height:325px;}
  .mycontent {padding:0;}
}