如何移动我的按钮和占位符以做出响应？

Question

您好，我目前卡住了，因为我的按钮和占位符图像没有响应我目前正在下面的表单中输入你可以看到我的图像示例

当我开始将屏幕页面最小化为较小尺寸的视图时，图像正在被剪切

我以代码为例进行测试

我已经使用 class= 流体进行了测试，如果我尝试将其最小化，它似乎无法正常工作

<div class="col-md-6">
  <form id="form" class="needs-validation" action="" novalidate>
    <div class="form-group row">
      <label for="validationName" class="col-2 col-form-label">Name:</label>
      <div class="col-10">
        <input name="validationName" type="text" class="form-control" id="validationName" placeholder="Company Name" required>

      </div>
    </div>
    <div class="form-group row">
      <label for="validationEmail" class="col-2 col-form-label">Email:</label>
      <div class="col-10">
        <input name="text2" type="email" class="form-control" id="validationEmail" placeholder="example1@gmail.com" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" required>

      </div>
    </div>


   
    <div style=" left: 500px; top: 10px; position: absolute;">
      <img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" class="img-fluid" id="output" width="100" height="100" style="border-radius: 50%;" />
      <br/><br>
      <!-- <label for="file" style="cursor: pointer; padding-left: 3px; padding-top: 1px; position: static; margin-left: 45px; height: 30px;">Select Image</label> -->
    </div>





    <button style="left: 525px; top: 120px; position: absolute;" type="submit" class="submitb btn btn-primary">Submit</button>


  </form>

如果屏幕分辨率变小然后被剪切，我该如何将图像和按钮移动到屏幕左侧？

Answer 1

来自Bootstrap 4 documentation：

Bootstrap 中的图像使用 .img-fluid 进行响应。最大宽度：100%；和高度：自动；应用于图像，使其随父元素缩放。

将img-fluid 类添加到您的<img> 标记

  <img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" class="img-fluid" width="100" height="100" style="border-radius: 50%;" />