小屏幕问题中的引导网格系统[重复]

Posted

技术标签:

【中文标题】小屏幕问题中的引导网格系统[重复]【英文标题】：Boostrap grid system in small screen problem [duplicate] 【发布时间】：2021-02-09 06:29:09 【问题描述】：

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

    2行6列（大屏、iPad Pro等设备） 3 行 4 列（iPhone 6/7/8 plus） 4 行 3 列（iphone 6/7/8 和更小的设备）

这是我尝试过的

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

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

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

【问题讨论】：

【参考方案1】：

在引导布局中轴除以 12

你可能需要在你的 div 类属性中替换它

 class="  col-xs-4 col-sm-3 col-md-3 col-lg-2 col-xl-2"

您还可以使用原版 CSS 来定位不同的屏幕尺寸

@media only screen and (max-width: 600px) 
  body 
    background-color: lightblue;

您可以在不同设备中使用最大宽度的位置：

320px — 480px：移动设备。

481px — 768px：iPad、平板电脑。

769px — 1024px：小屏幕、笔记本电脑。

1025px — 1200px：台式机、大屏幕。

1201 像素及更多 — 超大屏幕、电视。

【讨论】：

这根本不是我想要的，我在移动设备、平板电脑和 iPad 中获得了一栏。 假设使用 col-xs-4 的屏幕特别小（移动设备），您应该得到 3 列（3 * 4 = 12）【参考方案2】：

您可以在此处查看 Bootstrap 4.5 中所有可用的预设断点：https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints

总结一下：

超小型设备（纵向手机，小于 576 像素） 媒体查询：无 列类名：col-* 小型设备（横向手机，576px 及以上） 媒体查询：@media (min-width: 576px) 列类名：col-sm-* 中型设备（平板电脑，768 像素及以上） 媒体查询：@media (min-width: 768px) 列类名：col-md-* 大型设备（台式机，992 像素及以上） 媒体查询：@media (min-width: 992px) 列类名：col-lg-* 超大型设备（大型桌面，1200 像素及以上） 媒体查询：@media (min-width: 1200px) 列类名：col-xl-*

Bootstrap Grid 系统每行使用 12 列：https://getbootstrap.com/docs/4.5/layout/grid/#grid-options

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

每行 3 列（iphone 6/7/8 和更小的设备） 12 / 3 = 4 列类名：col-4 每行 4 列 (iPhone 6/7/8 plus) 12 / 4 = 3 列类名：col-sm-3 每行6列（大屏、iPad Pro等设备） 12 / 6 = 2 列类名：col-md-2 
<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/

【讨论】：

感谢您的解释，但您的代码并不能解决我的问题。我得到了我不想要的 3 行和 5 列。我真正想要的是 3 行 4 列（iPhone 6/7/8 plus）3. 4 行 3 列（iphone 6/7/8 和更小的设备）和其他屏幕 2 行 6 列 @ted：您使用的是 Bootstrap 4，不是吗？ Bootstrap 3 和 4 之间有一些重大变化，将 col-xs-* 替换为 col-* 就是其中之一。你看到我的演示链接了吗？如果您确实在使用 Bootstrap 3，请将您的标签从 bootstrap-4 更新为 bootstrap-3。【参考方案3】：

Bootstrap3 网格系统有四个类：

xs（适用于手机 - 屏幕宽度小于 768 像素）

sm（适用于平板电脑 - 屏幕宽度等于或大于 768 像素）

md（适用于小型笔记本电脑 - 屏幕宽度等于或大于 992 像素）

lg（适用于笔记本电脑和台式机 - 屏幕宽度等于或大于 1200 像素）

.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%;
  

 <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"  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"  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"  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"  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"  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"  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"  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"  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"  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"  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"  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"  class="img-responsive">
    </div>
</div>

【讨论】：

我在移动设备中只得到 2 列，这不是我想要的。我到底想要的是 3 行 4 列（iPhone 6/7/8 plus）4 行 3 列（iphone 6/7/8 和更小的设备） 我编辑了我的答案。请检查一次 它正在工作，谢谢你的变化很大。

以上是关于小屏幕问题中的引导网格系统[重复]的主要内容，如果未能解决你的问题，请参考以下文章

更改引导网格系统的列顺序

在整个屏幕上垂直对齐元素[重复]

网格系统无法在移动设备或小屏幕上正确调整大小

屏幕分辨率小于 576px 的引导网格中的 react-slick

用于小分辨率的引导图像网格

引导网格：在大屏幕上删除“col col-xs-12”？