引导程序4网格布局未按预期工作

根据Bootstrap4文档，我们设计了用于设计页面布局的类col-*-num和offset-*-num。在下面的代码div列从sm到up是相同的，只有extra small视图有不同的列。因此，作为bootstrap3，我使用col-sm-*为small来查看视图，col-xs-*为extra small视图。在small和以上的意见一切正常，但令人惊讶的是，在extra-small查看每div占据一排！我认为我在bootstrap4概念上出了问题，出了什么问题？引导程序4网格布局未按预期工作

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

来源

2017-06-29 soheil

可能的复制[网格中bootstrap4的α-6 intresting行为（https：//开头计算器.com/questions/42462902/grid-in-bootstrap4-alpha-6-intresting-behavior） – ZimSystem

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

来源

2017-06-29 19:29:51 Patrick

阅读bootstrap4文档，我明白'col- *'类适用于所有视图遵循相同设置的情况。但在阅读你的答案后，我会回顾Bootstrap4网格文件，我应该说你是对的。但我认为重要的Bootstrap4文件更明确地宣布！ – soheil

引导程序4网格布局未按预期工作

回答

相关问题