个人中心
gpt4 book ai didi

javascript - Bootstrap 小窗口导航栏下拉菜单不起作用

转载 作者：行者123 更新时间：2023-11-30 11:35:23 27 4
gpt4 key购买 nike

我正在尝试使用 bootstrap 开发我的第一个网站，所以我对它还很陌生。我使用了反向导航栏，我注意到当我缩小浏览器的窗口时，导航栏的右侧编译在一个不起作用的下拉菜单上。它不会下拉菜单。

窗口通常是这样的 Normal Window

这是无法在导航栏上正常工作的下拉菜单。 PS-它的红色边框。 This is the dropdown menu that doesn't work properly on the navbar. PS- Its red bordered.

这是我的 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>

最佳答案

按给定顺序在头部部分使用。

 <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>

关于javascript - Bootstrap 小窗口导航栏下拉菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44670350/

27 4 0
文章推荐： javah not found 错误在 jdk1.6 但在 jdk1.7 上没有
文章推荐： java - orphanRemoval=true 双向OneToOne
文章推荐： java - 使用 http post 登录网站
文章推荐： java - 如何统计提问次数？