Bootstrap4 -屏幕外图像

Question

我正在尝试创建一个响应式页面，其中的列如下所示：

​

​

我的代码如下所示：

​

<div class="container">

  <div class="row">
  
    <div class="col-sm">
      <img src="..." class="img-fluid">
    </div>
    
    <div class="col-sm">
      <div class="col">...</div>
      <div class="w-100"></div>
      <div class="col">...</div>
    </div>
    
  </div>

</div>

​

但当我试着缩小它的比例，使列在另一列下面时，图像就会从屏幕上消失，看起来像这样：

​

​

有什么建议吗？

Answer 1

尝试使用col-md-6 col-sm-12并查看...并将row类添加到第二列的div中。

为什么你只写col-sm？你真的知道如何使用bootstrap吗？

​

<div class="container">

  <div class="row">
  
    <div class="col-md-6 col-sm-12">
      <img src="..." class="img-fluid">
    </div>
    
    <div class="col-md-6 col-sm-12">
      <div class="row">
       <div class="col-sm-12">...</div>
       <div class="w-100"></div>
       <div class="col-sm-12">...</div>
      </div>
    </div>
    
  </div>

</div>

​