Bootstrap列不适用于手机

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>

我incuded引导从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-sm类（特别是宽度）踢从768px，你可以OVERRIDE Bootstrap的col-sm的样式来模仿col-xs行为更低的视口。首先要确保的是，您的项目中有一个父类，您可以将其用作父级/子级选择器，因为只需编写像.col-sm-* {}这样的样式就会与Bootstrap的原生样式冲突。

比方说，你的身体标记有一类“网页”例如，我们可以使用@media查询模仿什么COL-XS类做如下767px：

@media (max-width: 767px) { 
    .page .col-sm-3 { 
    width: 25%; 
    } 
    .page .col-sm-6 { 
    width: 50%; 
    } 
    .page .col-sm-9 { 
    width: 75%; 
    } 
} 

您还可以使用通配符Bootstrap也是如此：

@media (max-width: 767px) { 
    .page div[class^="col-sm-"] { 
    float: left; 
    } 
} 

此外，请确保您的自定义CSS文件是在Bootstrap之后引用的。

Answer 2

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>