Bootstrap 列不适用于移动设备 [英] Bootstrap columns not working on mobile

查看：27
本文介绍了Bootstrap 列不适用于移动设备的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在一行中有 3 个 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="容器"><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 class="footer-text-block" style="margin-left:100px;"><p>119180, 莫斯科 <br>Malaya Yakimanka,3</p>

<div class="col-xs-12 col-sm-4"><div class="footer-icon"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i>

<div class="footer-text"><p>info@romeda-capital.com</p>

<div class="col-xs-12 col-sm-4"><div class="footer-icon"><i class="fa fa-phone fa-lg" aria-hidden="true"></i>

<div class="footer-text"><p>+7 909 628 59 71 </p>

我从 MaxCDN 引入了引导程序:

<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"/>

解决方案

col-xs-* 已在 bootstrap V4

中弃用

尝试用 col-12 替换 col-xs-12，它会按预期工作.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="样式表"/><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><div class="content-footer"><div class="容器"><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 class="footer-text-block"><p>119180, 莫斯科 <br>Malaya Yakimanka,3</p>

<div class="col-12 col-sm-4"><div class="footer-icon"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i>

<div class="footer-text"><p>info@romeda-capital.com</p>

<div class="col-12 col-sm-4"><div class="footer-icon"><i class="fa fa-phone fa-lg" aria-hidden="true"></i>

<div class="footer-text"><p>+7 909 628 59 71 </p>

I have three coluns in on row and it works ok. I used col-xs-12 so the columns become rows when it goes to mobile. Its not working. Columns remain in one row

<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>

I incuded bootstrap from 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" />

解决方案

col-xs-* has been deprecated in bootstrap V4

Try replacing col-xs-12 with col-12 and it will work as expected.

<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>

这篇关于Bootstrap 列不适用于移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆