Html 使用引导网格，如何添加响应映像并适应网格

我的代码：

试试这个

引导示例

在bootstrap 4 class=“img fluid”中使用此类使图像响应

---

如果图像的宽度很小，但您仍然希望使其适合网格，然后将图像宽度设置为100%，您也可以在BS4中使用该类“w-100”，查看我的小提琴，并告诉我这是否是您要查找的原因

<div class="container">
  <div class="row"> 
    <div class="col-6"> 
      <img src="http://cedricmarchal.eu/wp-content/uploads/2018/12/pexels-photo-414612.jpeg" class ="img-fluid"> 
    </div> 
    <div class="col-4"> 
     <form> 
      <div class="form-example">
      <label for="name">Enter your name: </label>
      <input type="text" name="name" id="name" required>
    </div>
    <div class="form-example">
      <label for="email">Enter your email: </label>
      <input type="email" name="email" id="email" required>
    </div>
    <div class="form-example">
      <input type="submit" value="Subscribe!">
    </div>
     </form> 
     </div>
 </div>

---

只要在

img

元素中添加

img流体

类，我也会更新您的代码，希望它能帮助您。谢谢

引导响应映像文档-

img流体是您正在寻找的答案。作为补充说明，从Bootstrap 4开始，没有理由使用“col-sm-col-md-col-lg-col-xl”等，只要使用col-它就会自动调整屏幕大小。

您能上传更多的代码吗？因此，我们可以了解您正在寻找什么共享您的设计

.container{
  margin-top: 5px;
}