Question

我有三个coluns在行，它工作正常。我使用了col-xs-12，因此当它进入移动时，列成为行。它不起作用。列保持在一行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />


<div class="content-footer">
      <div class="container">          
             <div class="row">
                 <div class="col-xs-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text-block" style="margin-left:100px;">          
                               <p> 119180, Moscow <br>Malaya Yakimanka,3</p>
                                                              </div>
                 </div>
                 <div class="col-xs-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-envelope fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text">          
                               <p>info@romeda-capital.com</p>
                                                              </div>
                 </div>
                 <div class="col-xs-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-phone fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text">          
                                  <p>+7 909 628 59 71</p>
                               </div>
                 </div>
             </div>
      </div>
  </div>

我从MaxCDN获得了引导程序：

<link rel="stylesheet" type="text/css" href="bootstrap-msg.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-msg.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />

Answer 1

col-xs-*已在bootstrap V4

中弃用

尝试将col-xs-12替换为col-12，它将按预期工作。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content-footer">
      <div class="container">          
             <div class="row">
                 <div class="col-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text-block">          
                               <p> 119180, Moscow <br>Malaya Yakimanka,3</p>
                                                              </div>
                 </div>
                 <div class="col-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-envelope fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text">          
                               <p>info@romeda-capital.com</p>
                                                              </div>
                 </div>
                 <div class="col-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-phone fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text">          
                                  <p>+7 909 628 59 71</p>
                               </div>
                 </div>
             </div>
      </div>
  </div>

Answer 2

col-xs- *已从引导程序4中删除，而不是col-xs- *，您可以直接使用col- * ex。 col-3，col-4对我有用。

Answer 3

尝试仅将col-xs-12替换为col-12，并使用以下安排

col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12

Bootstrap列无法在移动设备上运行

3 个答案: