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.