html - 列在移动设备上重叠

Question

我有以下代码可以很好地显示两个表单，它们的字段和按钮在桌面分辨率上并排显示。

<div class="row">
    <div class="col-md-6 col-sm-6 first-nogutter">
        <div class="row">
            <form role="form" method="post" action="submit.php" id="check_avail2"
                                  autocomplete="off">

                <div class="col-md-10 col-sm-10 first-nogutter">
                    <input type="text" class=" form-control" id="phone" name="phone"
                                           placeholder="Phone">
                    <span class="input-icon"><i class="icon-user-8"></i></span>
                </div>
                <button type="submit" class="btn-check" id="submit-check2">Submit 1</button>


             </form>
         </div>
     </div>
     <div class="col-md-6 col-sm-6 adjustedcol">
         <div class="row">
             <form role="form" method="post" action="submit.php" id="check_avail3"
                                  autocomplete="off">
                 <div class="col-md-10 col-sm-10 first-nogutter">
                     <input type="text" class=" form-control" id="name" name="name"
                                           placeholder="Name">
                 </div>
                 <button type="submit" class="btn-check" id="submit-check3">Submit 2</button>

             </form>
         </div>
     </div>
 </div>

但是，当我切换到移动设备时，第二个字段与第一个按钮重叠，我希望第二个字段位于第一个按钮的正下方。

Answer 1

检查这个 css jsfiddle

添加这个CSS

@media (max-width: 767px) {
  .btn-check {width:120px; display:block;margin:auto}
 }

代替这个 CSS

@media (max-width: 767px) {
    .btn-check {width:120px; display:block;position:absolute; bottom:-50px;     left:50%; margin-left:-60px;}
}