Css Bootstrap 4网格布局没有'；I don’我没有按预期工作_Css_Bootstrap 4

Css Bootstrap 4网格布局没有'；I don’我没有按预期工作

css bootstrap-4

Css Bootstrap 4网格布局没有'；I don’我没有按预期工作,css,bootstrap-4,Css,Bootstrap 4,根据Bootstrap4文档，我们有用于设计页面布局的类col-*-num和offset-*-num。在以下代码div中，从sm到up的列是相同的，只有extra-small视图具有不同的列。作为bootstrap3，我使用col sm-*来处理small向上视图和col xs-*来处理extra small视图。在small和up视图中，所有内容都符合要求，但令人惊讶的是，在extra small视图中，每个div占据一行！我想我在bootstrap4的概念上有些错误，怎么了 HTML 自v4

根据Bootstrap4文档，我们有用于设计页面布局的类

col-*-num

和

offset-*-num

。在以下代码div中，从

sm

到up的列是相同的，只有

extra-small

视图具有不同的列。作为bootstrap3，我使用

col sm-*

来处理

small

向上视图和

col xs-*

来处理

extra small

视图。在

small

和up视图中，所有内容都符合要求，但令人惊讶的是，在

extra small

视图中，每个

div

占据一行！我想我在bootstrap4的概念上有些错误，怎么了

HTML

自v4.0.0-alpha.6以来，

-xs

中缀已被删除。从发布

首先，我们从最低（额外小）断点删除了

-xs

中缀。xs不像sm、md、lg和xl那样是一个响应断点，因为它不会以最小宽度和最大宽度开始应用样式。它只适用于所有内容，因为没有边界@media查询

因此，在您的情况下：

col-xs-2 offset-xs-1

变成

col-2 offset-1

，

col-xs-3 offset-xs-2

变成

col-3 offset-2

自v4.0.0-alpha.6以来，

-xs

中缀已被删除。从发布

首先，我们从最低（额外小）断点删除了

-xs

中缀。xs不像sm、md、lg和xl那样是一个响应断点，因为它不会以最小宽度和最大宽度开始应用样式。它只适用于所有内容，因为没有边界@media查询

因此，在您的情况下：

col-xs-2offset-xs-1

变成

col-2offset-1

和

col-xs-3offset-xs-2

变成

col-3offset-2
读取bootstrap4文档的可能重复，我知道col-*
类适用于所有视图遵循相同设置的情况。但在阅读了你们的答案后，我回顾了Bootstrap4网格文档，我应该说你们是对的。但我认为Bootstrap4文件更明确地宣布这一点很重要！通过阅读bootstrap4文档，我了解到col-*类适用于所有视图都遵循相同设置的情况。但在阅读了你们的答案后，我回顾了Bootstrap4网格文档，我应该说你们是对的。但我认为Bootstrap4文件更明确地宣布这一点很重要！
<body>
        <div id="top-ribbon" class="container-fluid">
            <div class="row align-items-center">
                <div id="logo" class="col-xs-2 offset-xs-1 col-sm-2 offset-sm-2 d-flex align-items-center justify-content-center color-white">Hello
                </div>
                <div id="socials" class="col-xs-3 offset-xs-2 col-sm-2 offset-sm-6 d-flex align-items-center justify-content-around color-white">
                        0256666666<i class="fa fa-phone color-white"></i>
                </div>
            </div>
        </div>
        </body>

#top-ribbon{
    background-color: rgb(168, 8, 133);
}
#socials i{
    font-size: 20px;
}

#socials, #logo{
    border: 1px solid;
}
.color-white{
    color: white;
}
#top-ribbon1{
    background-color: rgb(168, 8, 133);
}
#socials1 i{
    font-size: 20px;
}

#socials1, #logo1{
    border: 1px solid;
}