Bootstrap小窗口导航栏下拉列表无法正常工作
[英]Bootstrap small window navbar dropdown not working
问题描述
我正在尝试用bootstrap开发我的第一个网站，所以我对它很陌生。 我使用反向导航栏，我注意到当我的浏览器窗口变小时，导航栏的右侧会在下拉菜单上编译，该菜单无法正常工作。 它不会下拉菜单。
这就是窗口的正常情况
这是下拉菜单，在导航栏上无法正常工作。 PS-它的红色边界。
这是我的HTML：
body { margin: 0; } .jumbotron{ align-items:center; display:flex; background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg'); background-size:cover; height:450px; color:white; height: 50vh; } * { box-sizing: border-box; } .columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) } .price .header { background-color: #2D2727; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #eee; font-size: 20px; } .button { background-color: #4CAF50; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 600px) { .columns { width: 100%; } }
<!DOCKTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>WebHosting</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="main.css" type="text/css"> </head> <body> <!--NavBar--> <div class="row"> <div class="col-lg-8"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">WebHosting</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="contactos.html">Contactos</a></li> <li><a href="preços.html">Preços</a></li> </ul> </div> </div> </nav> </div> </div><!--NavBar END--> <section class="jumbotron"> <div class="container"> <div class="row text-center"> <h1>WebHosting</h1> <p>Host your WebSite now!!</p> <p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p> </div> </div> </section> <div class="columns"> <ul class="price"> <li class="header">Host</li> <li class="grey">Free</li> <li>Sem criação de WebSite</li> <li>Sem Dominio</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header">Host + WebSite</li> <li class="grey">€ 9.99</li> <li>Criação do WebSite</li> <li>Sem Dominio</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header">Host + WebSite + Dominio</li> <li class="grey">€ 9.99 / year</li> <li>Criação do WebSite</li> <li>Dominio incluido</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div> </body> </html>
1 个解决方案
解决方案1
3 已采纳 2017-06-21 08:21:23
按给定顺序在头部使用。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
body { margin: 0; } .jumbotron { align-items: center; display: flex; background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg'); background-size: cover; height: 450px; color: white; height: 50vh; } * { box-sizing: border-box; } .columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2) } .price .header { background-color: #2D2727; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #eee; font-size: 20px; } .button { background-color: #4CAF50; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 600px) { .columns { width: 100%; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <div class="row"> <div class="col-lg-8"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">WebHosting</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="contactos.html">Contactos</a></li> <li><a href="preços.html">Preços</a></li> </ul> </div> </div> </nav> </div> </div> <!--NavBar END--> <section class="jumbotron"> <div class="container"> <div class="row text-center"> <h1>WebHosting</h1> <p>Host your WebSite now!!</p> <p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p> </div> </div> </section> <div class="columns"> <ul class="price"> <li class="header">Host</li> <li class="grey">Free</li> <li>Sem criação de WebSite</li> <li>Sem Dominio</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header">Host + WebSite</li> <li class="grey">€ 9.99</li> <li>Criação do WebSite</li> <li>Sem Dominio</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header">Host + WebSite + Dominio</li> <li class="grey">€ 9.99 / year</li> <li>Criação do WebSite</li> <li>Dominio incluido</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div>
在小窗口或移动设备上查看时，我的Bootstrap固定顶部导航栏不会显示所有下拉菜单项
[英]My Bootstrap fixed-top navbar won't show all dropdown items when viewing in a small window or on a mobile device
Bootstrap Navbar下拉菜单在浏览器中不起作用，Codepen可以
[英]Bootstrap Navbar Dropdown Not Working in Browser, Codepen okay
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.