html - 转换到移动 View 后如何在 Bootstrap 列上使图像缩放到全宽

Question

当您缩小屏幕尺寸以便过渡到移动 View 时，我正在努力使右侧的图像拉伸(stretch)到全宽。bootstrap 中是否有任何其他类会执行与“img-fluid”类似的工作，但当它低于 bootstrap 网格系统中的文本时显示图像全宽？

<div class="row">
<div class="col-md-6 d-flex">
<div class="align-self-center">
<p class="lead font-weight-bold">sometext</p>
</div>
</div>
<div class="col-sm-6">
  <img class="img-fluid" src="someimage.jpg">
</div>
</div>

这是我的 fiddle :http://jsfiddle.net/x1hphsvb/2220/要明白我的意思，只需降低显示窗口的宽度即可。图像位于文本下方并且仅填充 div 的一半，当我希望它完全填充它并表现得像它现在在过渡之前所做的那样。

Answer 1

两列应具有相同的断点(即 md/sm)，以便它们同时变为全 Angular ...

   <div class="row">
     <div class="col-md-6 d-flex">
      <div class="align-self-center">
       <p class="lead font-weight-bold">sometext</p>
      </div>
     </div>
     <div class="col-md-6">
      <img class="img-fluid" src="someimage.jpg">
     </div>
   </div>

http://jsfiddle.net/dwnu5zjq/