Question

我正在使用bootstrap 4在我的React应用程序中创建个人资料编辑表单。

表格在大型显示器上看起来很好，但是当在移动设备等小型显示器上时，form-groups重叠...请参阅下面的问题图片，注意Profile Photo占位符图像如何位于第一个名称应该按下名字，而不是重叠。

我是否在使用引导网格系统或表单组时出错？感谢

正确：

问题：

来自JSFiddle的

代码：

<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>

Answer 1

我有很多这样的问题。我处理它们的方式是使用媒体查询。将类添加到右侧网格（col-lg-9 col-sm-12）。在较小的屏幕上@media（最小宽度：780px）给出了类边距：30px;

如果这对您有用，请告诉我

Answer 2

为移动设备设置保证金或应用Css代码媒体宽度并为其提供保证金。

[u'\n        Text 2\n        ', u'\n        Text 2 continue\n    ']
[u'Text 2', u'Text 2 continue']

示例：

margin-top: 110px;

Answer 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<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" 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="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>

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

3 个答案: