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

Question

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

1. 2行6列（大屏、iPad Pro等设备）
2. 3 行 4 列（iPhone 6/7/8 plus）
3. 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" 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 列，但在 iPhone 6/7/8 plus 和 iphone 6/7/8 及更小的设备上我只得到一列。 我不知道如何解决它，希望我的问题很清楚:) 谢谢

Answer 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 像素及更多 — 超大屏幕、电视。

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

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