Bootstrap 4導航欄折疊不堆疊導航項目
[英]Bootstrap 4 Nav Bar Collapse not stacking nav items
問題描述
我有一個奇怪的地方，當我的Bootstrap4導航欄折疊在狹窄模式下展開菜單時，它沒有堆疊導航項目。 我認為這與全寬度導航項目相關的導航輸入配置有關。 為了使搜索輸入向左堆疊而與nav-links向右堆疊，我將它們放置在兩個單獨的ul中，並在父div之間應用了justify-content-between的flex-row。 這給了我想要的全角外觀，但完全破壞了折疊菜單中的堆疊。
這是chrome中折疊和展開結果的圖像。
這是完整的代碼，因為我只是在玩Bootstrap4
nav{ -webkit-box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.5); box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.5); }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous"> <link rel="stylesheet" href="../C4 Boiler/css/nav.css"> <title>Boiler Plate</title> </head> <body> <nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark"> <a class="navbar-brand" href="#"> <img src="https://picsum.photos/50" width="50" height="50" alt="Test"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-between" id="navbarNavDropdown"> <ul class="navbar-nav flex-row"> <form class="form-inline mr-auto"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"> <i class="fas fa-search fa-lg"></i> </button> </form> </ul> <ul class="navbar-nav flex-row-reverse"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Profile </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Info </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> </ul> </div> </nav> <div class="title-box container"> <div> </div> </div> <div class="project-box container"> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script> </body> </html>
如果有人有任何建議，我將不勝感激。
謝謝馬特
1 個解決方案
解決方案1
0 已采納 2018-07-19 18:05:43
您的示例幾乎可以正常工作。
問題是您在.navbar-nav上添加的.flex-row和.flex-row-reverse類。 我看不到這兩個類沒有增加任何價值，因此我刪除了它們。 我對導航欄菜單項進行了重新排序，以便它們以相反的順序排列，即從“主頁”，“功能”，“ 2”下拉菜單中。
另外，我在input-group使用了帶有附加組件的input-group ，因為您的搜索按鈕會溢出並轉到小屏幕的下一行。 為了使搜索輸入寬度為100％，我在其上使用了.w-100類。
小提琴： http : //jsfiddle.net/aq9Laaew/101531/
引導導航欄崩潰問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.