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>