Bootstrap-4卡响应图像/文本列重叠

Question

我有两张相邻的卡片，我试着设计它，让它们总是有相同的高度，而且我很难让我的左边的盒子看起来漂亮，没有重叠。

目前我在左边的框中有两个元素，一个是图像元素，一个是文本元素。我正在尝试设置左边框的样式，使元素不重叠，并且框在调整大小时具有响应性。

在我的jsfiddle (https://jsfiddle.net/martinradio/jshet597/27/)中，它现在看起来像这样：

​

​

<br>
<div class="container-fluid">
  <div class="row">

    <!-- Left Box -->
    <div class="col-md-4">
      <div class="card mb-4 box-shadow" style=height:100%>
        <div class="card-body ">
          <div class="row align-items-center mb-4">
          <div class="col">
            <!-- Title -->
            <h4 class="mb-2">
              Left Box
            </h4>
          </div>
        </div> 
          <div class="container h-100">
            <div class=" justify-content-center align-items-center">
              <div class="row ">
                <!-- img -->
                <div class="col-md-4">
                  <div class=""> 
                    <img class="img-fluid" src="https://www.kroger.com/product/images/medium/front/0004900005537" /> 
                  </div>
                </div>

                <!-- text -->
                <div class="col-md-8 my-auto"> 
                  <div>INFO1:STUFFHERE</div>
                  <div>INFO2:MORESTUFFHERE</div>
                  <div>INFO3:EVENMORESTUFF,COOLHUH?</div>
                </div>
           
              </div> <!-- / .row -->
            </div>
          </div>
        </div>
      </div>
    </div> <!-- /col -->

    <!-- Right Box -->
    <div class="col-md-8">

      <div class="card mb-4 box-shadow" style=height:100%>
        <div class="card-body">
        <!-- Right Box -->
        <div class="row align-items-center mb-4">
          <div class="col">
            <!-- Title -->
            <h4 class="mb-2">
              Right Box
            </h4>
            <!-- Subtitle -->
            <p class="small text-muted mb-0">
              Last Updated March 20, 2020
            </p>
          </div>
        </div> 

        <!-- Top Row -->
        <div class="row">
          <!-- My Price -->
          <div class="col-sm-2">
            <h4 class="text-muted">My Price  <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On My Price" ></span></h4>

          </div>
          
          <!-- Competitor Low Price -->
          <div class="col-md-3 border-left">
            <h4 class="text-muted">adasd  <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Competitor Low Price" ></span></h4>
            <span class="h2 mb-0" id='competitiveLandscape_compLowPrice'>$1.29</span>
            <br>
            <h5 class="text-muted mt-1">z</h5>  
          </div>

          <!-- Competitor High Price -->
          <div class="col-md-3 border-left">
            <h4 class="text-muted">ad <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Competitor High Price" ></span></h4>
            <span class="h2 mb-0" id='competitiveLandscape_compHighPrice'>$2.19</span>
            <br>
            <h5 class="text-muted mt-1">x</h5>  
          </div>

          <!-- Competitor Price Index -->
          <div class="col-md-3 border-left">
            <h4 class="text-muted">sd  <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Competitor Price Index" ></span></h4>
            <span class="h2 mb-0" id="competitiveLandscape_cpi">1.09</span>
            <br>
            <span id='cpiNumSpan' class="badge mt-n1"><i id='cpiNumIcon' class="fe "></i> 230 BPS</span>
          </div>
        </div>
        <br>
        <!-- Bottom Row -->
        <div class="row">
          <!-- Competitors -->
          <div class="col-sm-2">
            <h4 class="text-muted">df  <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Competitors" ></span></h4>
            <span class="h2 mb-0" id='competitiveLandscape_competitors'>12</span>
            <br>
            <span class="badge badge-soft-danger mt-n1"><i class="fe fe-arrow-down"></i> 3</span>
          </div>
          
          <!-- Price Position -->
          <div class="col-md-3 border-left">
            <h4 class="text-muted">dfssdf  <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Price Position" ></span></h4>
            <span class="h2 mb-0" id='competitiveLandscape_pricePosition'>3</span>
            <br>
            <span class="badge badge-soft-success mt-n1"><i class="fe fe-arrow-up"></i> 1</span>
          </div>

          <!-- Price Gap -->
          <div class="col-md-3 border-left">
            <h4 class="text-muted">sdfsdf  <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Price Gap" ></span></h4>
            <span class="h2 mb-0" id='competitiveLandscape_priceGap'>35%</span>
            <br>
            <span class="badge badge-soft-danger mt-n1"><i class="fe fe-arrow-down"></i> 50 BPS</span> 
          </div>

          <!-- Price Competitiveness -->
          <div class="col-md-3 border-left">
            <h4 class="text-muted">sdfsdf <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Price Competitiveness" ></span></h4>
            <span class="h2 mb-0" id='competitiveLandscape_priceCompetitiveness'>84%</span>
            <br>
            <span class="badge badge-soft-success mt-n1"><i class="fe fe-arrow-up"></i> 400 BPS</span>
          </div>
        </div>
        </div>
      </div>
    
    </div>
  </div> <!-- /row -->
</div>

​

添加img-fluid有助于通过防止重叠来提高响应性，但也有导致图像看起来非常小的副作用，我试图通过添加style=“最大宽度:6”来解决这个问题，但它不会影响图像。

img-fluid标签甚至导致图像/文本不再居中。

有没有办法让我的img /文本保持在卡片的中心对齐，图像较大，同时保持响应性，以便调整大小时不会重叠？

谢谢

Answer 1

如果我没理解错的话，你想把左边的方框居中，不想让内容和图片重叠，并保持你的方框的高度和右边一样。

我从您的代码中删除了.container, .row and .h-100类，也从您的代码中删除了一些不需要的div，以获得合适的结果。

以下是您的代码

https://jsfiddle.net/w5pzcxn6/