Question

根据Bootstrap4文档，我们有用于设计页面布局的类col-*-num和offset-*-num。在以下代码中，从sm到up的div列相同，只有extra small视图具有不同的列。因此，作为bootstrap3，我使用col-sm-*用于small来查看视图，col-xs-*用于extra small视图。在small及以上视图中，所有内容都符合要求但令人惊讶的是，在extra-small视图中，每个div占据一排！我认为我在bootstrap4概念中出了点问题，出了什么问题？

HTML

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

的CSS

#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;
}

JSFiddle

Answer 1

自v4.0.0-alpha.6起，-xs中缀已被删除。从发布blog:

开始

首先，我们从最低（超小）断点中删除了-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

Bootstrap 4网格布局无法按预期工作

1 个答案: