Question

具有验证码和刷新验证码的登录页面在中小屏幕分辨率的同一行中不显示。请帮忙。我在这里粘贴了我的代码：

//此时出现问题

 <div class="row">
    <div class="col-sm-2 ">        
    <div class = "form-group reload_div">
    <?php echo $captcha; ?>                
    </div>        
    </div>    
    <div class="col-sm-1 hr"  >           
    <div class = "form-group">                
    <i class="fa fa-refresh refresh-captcha "  aria-hidden="true" style="font-size: 25px;"></i>
    </div>        
    </div>   
    </div>

此时出现问题////

Answer 1

问题是bootstrap中每行有12个逻辑列而不是3. sm-2 + sm-1 = 3.所以解决方法是ex。 sm-10 sm-2。

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-3 bg-primary captcha">
     <img src="https://placehold.it/150x100">
    </div>
    <div class="col-xs-6 col-sm-9 hr bg-info">
      <div class="form-group">
        <i class="fa fa-refresh refresh-captcha " aria-hidden="true" style="font-size: 25px;"></i>
      </div>
    </div>
  </div>
</div>

CSS

.captcha { min-width: 150px; }

https://jsfiddle.net/kvuzpsjL/28/

div的bootstrap行水平对齐在小和小的情况下无法正常工作中等屏幕分辨率

1 个答案: