Safari和iOS上的列都不起作用

Question

我尝试过使用bootstrap模板，但它在Safari和iOS小工具上无法正常工作，我的导航栏会移到窗口边框外面。但它在其他浏览器上非常出色。

            <div class="container">
                <div class="row">
                    <div class="col-md-9 col-sm-8">
                        <div class="hd-lft">
                            <ul>
                                <li><i class="fa fa-phone"></i>(888) 010203-4567</li>
                            </ul>
                        </div>  
                    </div>  
                    <div class="col-md-3 col-sm-4">
                        <div class="hd-rgt">
                            <a href="#">example@mail.com</a>
                        </div>              
                    </div>                  
                </div>
            </div>

看起来像是：

我该如何解决这个问题？

Answer 1

所有工作，你有1个额外的div并检查你的决议

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
           
            
            
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="hd-lft">
               <ul>
               <li><i class="fa fa-phone"></i>(888) 010203-4567</li>
               </ul>
            </div>  
        </div>  
        <div class="col-xs-6">
           <div class="hd-rgt">
             <a href="#">example@mail.com</a>
           </div>              
       </div>                  
   </div>
</div>