Custom Alignment of Bootstrap 4 Nav-bar Items
我正在使用Bootstrap 4.1,目前完全不熟悉Bootstrap。很抱歉,如果这个问题是重复的,但找不到适合我的正确答案(对于MS Paint图像也很抱歉)。因此,我必须做一个定制的导航栏,而我被卡住了。导航栏链接在展开时应类似于以下链接。收起时,我必须使用此按钮,并向右对齐。最后,当单击按钮时,元素必须居中-折叠的导航栏。在此先感谢!
只需使用Bootstrap的导航组件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <nav class="navbar justify-content-end navbar-expand-lg navbar-light bg-light"> Navbar <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <ul class="navbar-nav ml-auto" style="text-align: center;"> <li class="nav-item active"> Home <span class="sr-only">(current)</span> </li> <li class="nav-item"> Features </li> <li class="nav-item"> Pricing </li> <li class="nav-item"> Disabled </li> </ul> </nav> |
此处的屏幕快照看起来像您的导航栏:http://next.plnkr.co/edit/iZ1TUqZGqnzf74BG?open=lib/index.html
试试这个
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html> <html lang="en"> <head> Bootstrap Example <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </head> <body> <style> @media only screen and (max-width: 768px) { .navbar-nav li a { text-align:center; } } </style> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> Navbar <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <ul class="navbar-nav ml-auto"> <li class="nav-item"> Link </li> <li class="nav-item"> Link </li> <li class="nav-item"> Link </li> </ul> </nav> Collapsible Navbar <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p> <p><center>[wp_ad_camp_2]</center></p><p>Only when the button is clicked, the navigation bar will be displayed.</p> <p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p> </body> </html> |