文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >小屏幕问题中的自带网格系统

问小屏幕问题中的自带网格系统
EN

Stack Overflow用户
提问于 2020-10-27 00:05:30
回答 3查看 660关注 0票数 0

我正在尝试创建响应性的网页布局，在不同的设备屏幕上，我应该有不同的视图。

  1. 2行6列(大屏幕、iPad Pro和其他设备)
  2. 3行4列(iPhone 6/7/8 +)
  3. 4行3列(iPhone6/7/8及更小设备)

这就是我试过的

代码语言：javascript
复制
<div class="row">
    <div class="col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="col-xs-2 col-md-2 ">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class=" col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>

    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class=" col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class=" col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
</div>

我在大屏幕上有2排6 colum，但在iPhone 6/7/8 plus和iPhone6/7/8以及更小的设备中，我只得到一列。我不知道如何解决它，希望我的问题是清楚的:)谢谢

css
bootstrap-4
EN

回答 3

Stack Overflow用户

发布于 2020-10-27 00:15:53

在引导布局中，轴除以12。

您可能需要在div类属性中替换它。

代码语言：javascript
复制
 class="  col-xs-4 col-sm-3 col-md-3 col-lg-2 col-xl-2"

您还可以使用普通的CSS针对不同的屏幕大小。

代码语言：javascript
复制
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

对于不同设备中的最大宽度，您可以使用：

320 px-480:移动设备。

481 px-768: iPads，片剂。

769 px-1024:小屏幕，笔记本电脑。

1025 px-1200:桌面，大屏幕。

1201 TV和更多-超大屏幕，电视。

票数 0
EN

Stack Overflow用户

发布于 2020-10-27 00:46:32

您可以在Bootstra4.5中看到所有可用的预置断点：https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints

概括地说：

col-*

  • 超小型设备(肖像机，小于576 phones )
    • 媒体查询:none
    • 列类名：

@media (min-width: 576px)

  • column

  • 小设备(横向电话、576 up及以上)
  • 媒体查询：类名：col-sm-*

@media (min-width: 768px)

  • column

  • 媒体设备(平板电脑、768 up及以上)
  • 媒体查询：类名：col-md-*

@media (min-width: 992px)

  • column

  • 大型设备(桌面、992 up及以上)
  • 媒体查询：类名：col-lg-*

@media (min-width: 1200px)

  • column

  • 超大型设备(大型台式机、1200 up及以上)
  • 媒体查询：类名：col-xl-*

​

引导网格系统每行使用12列：https://getbootstrap.com/docs/4.5/layout/grid/#grid-options

​

换句话说，要构建你想要的东西，你需要：

  • 3列/行(iPhone6/7/8及更小的设备)
    • 12 /3=4
    • 列类名：

  • 4列/行(iPhone 6/7/8 +)
    • 12 /4=3
    • 列类名:iPhone

  • 6列(大屏幕、iPad Pro和其他设备)
    • 12 /6=2
    • 列类名：
      • 12/6

​

代码语言：javascript
复制
<div class="container-fluid">
    <div class="row">
        <div class="col-4 col-sm-3 col-md-2">
            </img />
        </div>
        ...
    </div>
</div>

演示： https://jsfiddle.net/davidliang2008/aoc3ksve/3/

​

您也可以在图像上使用.img-fluid获取响应性图像：

演示： https://jsfiddle.net/davidliang2008/aoc3ksve/5/

票数 0
EN

Stack Overflow用户

发布于 2020-10-27 03:57:55

Bootstrap3网格系统有四个类：

xs (用于手机-屏幕宽度小于768 xs)

sm (对于平板电脑-屏幕等于或大于768 sm宽)

md (用于小型膝上型计算机-屏幕宽度等于或大于992 md)

lg (用于膝上型计算机和台式机-屏幕宽度等于或大于1200 to )

​

代码语言：javascript
复制
.img-responsive {
  margin: 0 auto;
}

/* Here 414px and 736px are width of iPhone 6/7/8 plus */

@media only screen and (min-width: 414px) and (max-width: 736px) {
  .col-xs-4 {
     width: 25%;
  }
}
代码语言：javascript
复制
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row">
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2 ">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>

    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64546616

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档