FlexBoxGrid2 行問題
[英]FlexBoxGrid2 issue with rows
問題描述
我正在使用 FlexBoxGrid2 做一個項目，但行有問題。 我需要添加很多行，一個接一個，但是添加第二行我發現它位於第一行的后面，而不是我需要的下面。 刪除“位置：固定；” 在 CSS 中，“header_container”有助於解決這個問題，但我需要修復第一行（導航欄）。 請告知是否有任何解決方案，因為我完全卡在這里。 謝謝。
.header_container { max-width: 1124px; height: 72px; padding: 0 55px 0 55px; margin: 0 auto; background-color: #FFFFFF; position: fixed; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; box-shadow: 0px 0px 16px 0px #26262629; }.header_container:after { content: ""; display: table; clear: both; }.logo { float: left; width: 119.23px; height: 12.31px; padding: 20px 55px 20px 55px; } nav { float: right; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; }.btn { width: 78px; height: 40px; background-color: #FFFFFF; color: #1D1D1D; font-family: roboto; font-size: 13px; font-weight: 1000; text-align: center; border-radius: 2px; border: 1px solid #E0E0E0; margin-top: 16px; }.line { max-width: 80%; width: 956px; height: 1x; color: #757575; border-bottom: solid 1px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>ExamPro</title> <link rel="stylesheet" href="https.//unpkg.com/flexboxgrid2@7.2.1/flexboxgrid2 css"> </head> <body> <header> <div class="header_container"> <a href=""> <img src="" alt="logo" class="logo"/></a> <nav> <ul> <li><button class="btn">Войти</button></li> <li><a href=""> <img src="" alt="basket" class="basket"/></a> </ul> </nav> </div> </header> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-12 col-lg-12"> <div class="line">search</div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-12 col-lg-12"> </div> </div> </div> </body> </html>
2 個解決方案
解決方案1
0 2022-07-21 13:33:49
所以我找到了，要解決上述問題，您需要更改位置：已修復； 定位：粘性；一切正常。
解決方案2
0 2022-07-25 14:14:47
目前我只找到了一種解決問題的方法——在導航欄后的第一行添加更多填充，並在這種情況下保持 position:fixed。
使用 Flexboxgrid 還是 Bootstrap？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.