Bootstrap 3 卡片范围对不同屏幕尺寸的响应能力

Question

我创建了一个 Bootstrap 3 卡片宽度，并将 div class="card-wide-image-wrap" 设置为 50% 的最小宽度。这可以确保在我的笔记本电脑上正确显示（否则它不会显示带有覆盖文本块的完整图像）。但是，div 的最小宽度为 50% 会破坏卡片在手机上的显示方式（下图）。有没有办法解决这个问题？

第二个问题：对于右边添加的每一行文本，左边的图像似乎变大了。能否以某种方式将图像与卡片的文本侧分开以使其保持固定？

下图是 PC/大屏幕上想要的结果。当我将 div min-width 设置为 50% 时，我得到了这个。

但是，如下图所示，这在手机上显示效果不佳： 如果我省略 div min-width 50%，我会在 PC/大屏幕上得到以下不需要的结果：

但是，它会在移动设备上正确显示：

这是我的代码。谢谢瑞克：

 <style>

 p {
 color: white;
 }

 h2.ex1 {

 padding-left: 30px;
 }

 ul.ex1 {

 padding-left: 60px;
 }

 p.ex1 {

 padding-left: 30px;
 }

 h6.ex2{

 font-size: 22px;
 }


 .text-block {
  position: absolute;
  bottom: 80px;
  right:370px;

  background-color: #292929;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  block-size: max-content;

  }

  .cover {
  object-fit: cover;
  width: 10px;
  height: 10px;
  }


   div img{
   min-width:100%;
   min-height:100%;
   height:auto;
   position:relative;
   top:50%;
   left:50%;
   transform:translateY(-50%) translateX(-50%);
   }

   </style>



   <p style="text-align: center;"><br></p><div><div class="col-xs-12">
   <div class="calcite-web">
      <div class="card-base card-wide" style="background: #292929;max-width: 100%; margin: 0 auto;">
   
        <div class="card-wide-image-wrap" style="min-width:50%">
          <img alt="hurricanes" class="card-wide-image cover img-fluid" src="#">
             <div class="text-block">
               <h6 class="ex2" style="text-align: left; color: rgb(38, 149, 188);">Naturkræfter</h6> 
               <p style="text-align: left; color: rgb(38, 149, 188);">Cykloner i den nordlige og 
                sydlige hemisfære, adskilt af ækvator, hvor corioliskraften er 0,&nbsp; &nbsp;og 
                derfor forhindrer hvirvelvindene i at formes og krydse ækvatorlinjen</p>
             </div>
 
         </div>



         <div class="card-content px-2">
          <h2 class="ex1" style="color: white" id="intro">Lorem Ipsum</h2>
           <br>
          <p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            exercitation ullamco laboris nisi ut aliquip ex ea</p>
             <br>
               <ul class="ex1" style="color: white">
                 <li>Duis aute irure dolor in </li>
                 <li>Eprehenderit in voluptate velit esse cillum </li>
                 <li>Dolore eu fugiat nulla pariatur</li>
                 <li>Excepteur sint occaecat cupidatat non proident</li>
                 <li>Csunt in culpa qui</li>
                 </ul>
                 <br>
 
                  <p><a href="#" class="btn btn-primary" style="min-width: 114px; margin-left: 25px" 
                      target="_blank">Send os en besked</a></p>
                   <br>
        
             </div>
          </div>
       </div>
    </div>
</div>

Answer 1

您提到您使用的是 Bootstrap 3，但您的 img 标签使用 img-fluid 类，而它应该使用 img-responsive 类。

<img alt="hurricanes" class="card-wide-image cover img-responsive" src="#">

另外，我认为你的卡片范围的 CSS 定义是由某个模板驱动的？ Bootstrap3 本身就没有卡片并使用面板。