2017-10-11 57 views
0

我在行上有三个coluns,它工作正常。我使用col-xs-12,所以列在移动时变成行。它不工作。列留在一排Bootstrap列不适用于手机

<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>[email protected]</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" /> 

回答

0

尝试像这样(只是一个想法)

由于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之后引用的。

0

col-xs-*已过时,bootstrap V4

尝试更换col-xs-12col-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>[email protected]</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>

+0

我试过,但有同样的问题。将col-sm-4更改为col-md-4,它工作正常。感谢您的帮助。 – NDOE