引導程序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網格佈局未按預期工作

回答

相關問題