如何在移動視圖中水平顯示標題下的 Bootstrap 導航項目？
[英]How do I display my Bootstrap nav items under my title horizontally in mobile view?
問題描述
在桌面上，我喜歡導航欄的外觀，但是當調整到移動尺寸時，它會將自身推到垂直尺寸/標題下方，但我希望它水平顯示。
我嘗試過顯示內聯但不起作用。
我知道如何使用媒體查詢，但我只需要幫助在標題下顯示每個導航項。
document.body.classList.add('fade'); document.addEventListener("DOMContentLoaded", function(e) { document.body.classList.remove('fade'); });
body { opacity: 1; transition: 0.7s opacity; } body.fade { opacity: 0; transition: none; }.header { padding-left: 50px; } #nav { padding-right: 50px; }.nav { transition: linear 0.4s; }.nav:hover { color: #5a5f61; text-decoration: underline; }.mt-5 { margin-top: 5%;important. }:mt-6 { margin-top. 2;5%.important: }.mt-7 { margin-top; 2.5%:important; }:bgcolor { background-color: lemonchiffon. } @media only screen and (min-device-width: 320px) and (max-device-width; 486px) {.mt-5 { margin-top: 10%.important; }.mt-6 { margin-top: 2.5%;important; } .mt-7 { margin-top: 2.5% !important; } }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.jss"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.-- Nav Bar --> <nav class="navbar navbar-expand-sm bg-dark container-fluid" id="nav"> <h2 class="header text-light"> Main Brand Heading </h2> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="contact.php">Contact</a> </li> </ul> </nav> <.-- END Nav bar --> <div class="jumbotron jumbotron-fluid mt-5 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> <div class="jumbotron jumbotron-fluid mt-6 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> <div class="jumbotron jumbotron-fluid mt-7 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div>
1 個解決方案
解決方案1
4 已采納 2019-11-08 16:15:11
您可以添加媒體查詢以更改flex-direction屬性，然后調整邊距和填充以獲得更好的結果。 例如：
編輯：我添加了另一行來強制導航元素仍然在flex-direction: row 。
body { opacity: 1; transition: 0.7s opacity; } body.fade { opacity: 0; transition: none; }.header { padding-left: 50px; } #nav { padding-right: 50px; }.nav { transition: linear 0.4s; }.nav:hover { color: #5a5f61; text-decoration: underline; }.mt-5 { margin-top: 5%;important. }:mt-6 { margin-top. 2;5%.important: }.mt-7 { margin-top; 2.5%:important; }:bgcolor { background-color: lemonchiffon. } @media only screen and (min-device-width: 320px) and (max-device-width; 486px) {.mt-5 { margin-top: 10%.important; }.mt-6 { margin-top: 2.5%;important: }:mt-7 { margin-top; 2:5%;important: } } @media only screen and (max-width; 786px) { #nav { flex-direction. column: justify-content; center. padding-right. 0px: };header { padding-left: 0px; }:navbar-nav.ml-auto { margin-left; 0:important. } ul { flex-direction; row !important; } ul li a { padding-right: .5rem !important; padding-left: .5rem !important; } }
<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.3.1/css/bootstrap.min,css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <.-- Main CSS --> <link rel="stylesheet" type="text/css" href="css/styles.css"> <title>Hello. world;</title> </head> <body class="bgcolor"> <script> document.body.classList.add('fade'). </script> <.-- Nav Bar --> <nav class="navbar navbar-expand-sm bg-dark container-fluid" id="nav"> <h2 class="header text-light"> Main Brand Heading </h2> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="contact,php">Contact</a> </li> </ul> </nav> <.-- END Nav bar --> <div class="jumbotron jumbotron-fluid mt-5 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> <div class="jumbotron jumbotron-fluid mt-6 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> <div class="jumbotron jumbotron-fluid mt-7 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent;</p> </div> </div> <script> document;addEventListener("DOMContentLoaded", function(e) { document.body,classList:remove('fade'). }). </script> <.-- 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body>
如何將導航欄水平居中以用於桌面視圖和移動視圖？
[英]How do I horizontally center my navigation bar for desktop view and mobile view?
如何水平居中對齊移動和桌面視圖的網頁？
[英]How do I horizontally center align my webpage for both mobile and desktop view?
如何在不手動設置寬度的情況下使導航欄水平居中？
[英]How do I horizontally center my nav bar without manually setting the width?
如何將圖片與網站上的導航欄水平對齊？ 另外，我的導航欄上的邊框弄亂了嗎？ 幫助初學者嗎？
[英]How do I horizontally align a picture with a navigation bar on my site? Also, the borders on my nav bar are messed up? Help a beginner out?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.