Css 小屏幕问题中的Boostrap网格系统_Css_Bootstrap 4

Css 小屏幕问题中的Boostrap网格系统

css bootstrap-4

Css 小屏幕问题中的Boostrap网格系统,css,bootstrap-4,Css,Bootstrap 4,我正在尝试创建响应性的web布局，在不同的设备屏幕上我应该有不同的视图 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.iconar

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

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

我在大屏幕上有两排6列，但在iPhone6/7/8 plus和iPhone6/7/8及更小的设备上，我只有一列。

我不知道如何修复它，希望我的问题是清楚的：）谢谢在引导布局中，轴被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：台式机，大屏幕

1201px及以上-超大屏幕、电视。

在Bootstrap 4.5中，您可以在此处看到所有可用的预设断点：

总结如下：

超小型设备（肖像手机，小于576px）
- 媒体查询：无
- 列类名称：
```
col-*
```
小型设备（景观手机、576px及以上）
- 媒体查询：
```
@media（最小宽度：576px）
```
- 列类名称：
```
col sm-*
```
中型设备（平板电脑、768px及以上）
- 媒体查询：
```
@media（最小宽度：768px）
```
- 列类名称：
```
colmd-*
```
大型设备（台式机、992px及以上）
- 媒体查询：
```
@media（最小宽度：992px）
```
- 列类名称：
```
collg-*
```
超大设备（大型台式机，1200像素及以上）
- 媒体查询：
```
@media（最小宽度：1200px）
```
- 列类名称：
```
colxl-*
```

引导网格系统每行使用12列：

换句话说，要构建您想要的内容，您需要：

每行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
```

...

演示：

您也可以在图像上使用

.img fluid

，以获得响应图像：

演示：

Bootstrap3网格系统有四个类：

xs（用于手机-屏幕宽度小于768px）

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

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

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

.img响应{
保证金：0自动；
}
/*这里414px和736px是iPhone 6/7/8 plus的宽度*/
@仅介质屏幕和（最小宽度：414px）和（最大宽度：736px）{
.col-xs-4{
宽度：25%；
}
}

谢谢您的解释，但您的代码并不能解决我的问题。我得到了我不想要的3行5列。我真正想要的是3行4列（iPhone 6/7/8 plus）3。4行3列（iphone 6/7/8和更小的设备）和其他屏幕2行6columns@ted：您正在使用引导程序4，是吗？引导程序3和4之间有一些突破性的变化，将

col xs-*

替换为

col-*

就是其中之一。你看到我的演示链接了吗？如果你确实在使用Bootstrap 3，请将你的标签从Bootstrap-4更新为Bootstrap-3。这根本不是我想要的，我在移动设备、平板电脑和iPad中得到了一列。假设你使用col-xs-4，你应该得到3列（3*4=12）。我在移动设备中只得到了2列，这不是我想要的。我想要的是3行4列（iPhone 6/7/8 plus）4行3列（iPhone 6/7/8和更小的设备）我编辑了我的答案。请检查一下它是否正常工作，谢谢。