Css 使用Bootstrap 4，如何防止表单组相互重叠？

我正在使用Bootstrap 4在我的React应用程序中创建配置文件编辑表单

表单在大屏幕上看起来不错，但在小型屏幕（如mobile）上时，

表单组重叠。请参见下面的问题图像，注意当个人资料照片占位符图像应该向下按名字而不是重叠时，它是如何位于名字上方的

我是否在引导网格系统或表单组方面做错了什么

JSFiddle：

正确：

 <div class="col-lg-9 col-sm-12">
            <div class="form-group" style="margin-top: 110px;">
               <label>First Name</label>
               <div><input type="text" name="first_name" value="XXX" placeholder="First Name" class="form-control"></div>
            </div>
            <div class="form-group">
               <label>Last Name</label>
               <div><input type="text" name="last_name" value="XXX" placeholder="Last Name" class="form-control"></div>
            </div>
         </div>
      </div>


问题：

 <div class="col-lg-9 col-sm-12">
            <div class="form-group" style="margin-top: 110px;">
               <label>First Name</label>
               <div><input type="text" name="first_name" value="XXX" placeholder="First Name" class="form-control"></div>
            </div>
            <div class="form-group">
               <label>Last Name</label>
               <div><input type="text" name="last_name" value="XXX" placeholder="Last Name" class="form-control"></div>
            </div>
         </div>
      </div>


来自JSFIDLE的代码：

<div class="container">
   <form>
      <div class="row">
         <div class="col-lg-3 col-sm-12">
            <div class="form-group" style="height: 100%;">
               <label for="files">Change your profile photo</label>
               <span>
                  <div class="" style="width: 100%; height: 100%; font-size: 0px; margin-bottom: 1rem; background-color: rgb(29, 161, 242); background-image: url(&quot;https://abs.twimg.com/a/1498195419/img/t1/highline/empty_state/owner_empty_avatar.png&quot;); background-position: 50% center;">
                     <!-- react-text: 85 -->Try dropping some files.<!-- /react-text --><input type="file" accept="image/jpeg, image/png" multiple="" style="display: none;">
                  </div>
                  <button type="button" class="btn btn-secondary btn-sm btn-block">Upload new Photo</button><!-- react-text: 88 --><!-- /react-text -->
               </span>
            </div>
         </div>
         <div class="col-lg-9 col-sm-12">
            <div class="form-group">
               <label>First Name</label>
               <div><input type="text" name="first_name" value="XXX" placeholder="First Name" class="form-control"></div>
            </div>
            <div class="form-group">
               <label>Last Name</label>
               <div><input type="text" name="last_name" value="XXX" placeholder="Last Name" class="form-control"></div>
            </div>
         </div>
      </div>
      <div class="row row justify-content-end">
         <div class="col-lg-9 col-sm-12"><button type="submit" class="btn btn-primary">Save Changes</button></div>
      </div>
   </form>
</div>


更改您的个人资料照片
尝试删除一些文件。
上传新照片
名字
姓
保存更改


更改您的个人资料照片
尝试删除一些文件。
上传新照片
名字
姓
保存更改
我经常遇到这种问题。我处理这些问题的方式是使用媒体查询。将类添加到右侧网格（col-lg-9 col-sm-12）。在较小的屏幕@媒体（最小宽度：780px）上，给类的最大余量：30px

让我知道这是否适合你

设置边距或为移动设备应用Css代码媒体宽度，并为其提供边距

示例：

 <div class="col-lg-9 col-sm-12">
            <div class="form-group" style="margin-top: 110px;">
               <label>First Name</label>
               <div><input type="text" name="first_name" value="XXX" placeholder="First Name" class="form-control"></div>
            </div>
            <div class="form-group">
               <label>Last Name</label>
               <div><input type="text" name="last_name" value="XXX" placeholder="Last Name" class="form-control"></div>
            </div>
         </div>
      </div>


名字
姓
介意解释一下区别吗？我做错了什么？它的重叠是由于
margin
的问题，所以请给出
margin top:90px
谢谢，但这不只是一个黑客行为吗？那么还有另一种方式吗？？希望修理。。检查一下！！当显示较大时，这也不起作用，因为正在使用页边距。由于页边距问题，页边距重叠，因此从表单组中给出
页边距顶部：110px