smallとmediumの画面解像度で正しく動作しないdivのブートストラップ行の水平配置

Question

captchaとrefresh captchaを使用したログインページは、中小画面解像度では同じ行に表示されません。助けてください。私はここに私のコード貼り付けられています

を//問題が

<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

問題は、行ごとに12個の論理列であるということですブートストラップではありません。3. sm-2 + sm-1 = 3.したがって、解は元です。 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/