下拉菜单的会降不下来

问题描述 投票:1回答:1

我无法理解为什么我的下拉菜单不工作。他们直接从引导复制并应工作。我怀疑它是做了jQuery /引导链接标签,但我也不太清楚。

订购了jQuery和Bootstrap链接不同,进入不同的代码。它只是当我在浏览器中打开将无法正常工作。

<!DOCTYPE html>
    <html>
    <head>
    	<title>Review of things</title>
    
    	<meta charset="utf-8">
    
    	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    
    	<link rel="stylesheet" type="text/css" href="review.css">
    
    
    </head>
    
    
    <body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</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" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </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">
              Dropdown link
            </a>
            <div class="dropdown-menu" 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>
        </ul>
      </div>
    </nav>
    
    <hr width="75%">
    
    <div class="container">
      <div class="row">
        <div class="col">
    	<ul>
    		<li>OnE</li>
    		<li>tWo</li>
    		<li>THrEe</li>
    	</ul>
    	</div>
    
    <div class="col">
    	<table border="2px" solid black>
    	 <thead>
    		<tr>
    				<th>Table</th>
    				<th>ROWS</th>
    				<th>ARE</th>
    				<th>COOOOL</th>
    		</tr>
    	 </thead>
    	 	<tbody>
    			<tr>
    				<td>BOO</td>
    				<td>words</td>
    				<td>for</td>
    				<td>TABLE</td>
    			</tr>
    
    			<tr>
    				<td>Yay words</td>
    				<td>Yay words</td>
    				<td>Yay words</td>
    				<td>Yay words</td>
    			</tr>
    			<tr>
    				<td>table data</td>
    				<td>table data</td>
    				<td>table data</td>
    				<td>table data</td>
    			</tr>
    
    		</tbody>
    	</table>
    
    </div>
    
    <div class="col">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    
    </div>
    </div>
    </div>
    </div>
    
    <div class="formcontain">
    <form>
      <div class="form-group" >
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    </div>
    
    <p>
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.>
    
    </p>
    
    <hr>
    
    <h1>
    	This is an H1 line.
    </h1>
    
    </body>
    </html>

我想到的下拉选项出现在页面完全展开,并在页面是移动视图XS。

javascript jquery html css twitter-bootstrap
1个回答
3
投票

你缺少引导的JavaScript这个CDN添加到您的代码,你的jQuery下面:

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>

您的代码(你有一个额外的结束的div和我搬到了脚本的HTML的底部):

<!DOCTYPE html>
    <html>
    <head>
    	<title>Review of things</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    	<link rel="stylesheet" type="text/css" href="review.css">
    </head>
    
    <body>
    	<nav class="navbar navbar-expand-lg navbar-light bg-light">
    		<a class="navbar-brand" href="#">Navbar</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" id="navbarNavDropdown">
    			<ul class="navbar-nav">
    				<li class="nav-item active">
    					<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    				</li>
    				<li class="nav-item">
    					<a class="nav-link" href="#">Features</a>
    				</li>
    				<li class="nav-item">
    					<a class="nav-link" href="#">Pricing</a>
    				</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">
    						Dropdown link
    					</a>
    					<div class="dropdown-menu" 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>
    			</ul>
    		</div>
    	</nav>
    
    	<hr width="75%">
    
    	<div class="container">
    		<div class="row">
    			<div class="col">
    				<ul>
    					<li>OnE</li>
    					<li>tWo</li>
    					<li>THrEe</li>
    				</ul>
    			</div>
    
    			<div class="col">
    				<table border="2px" solid black>
    					<thead>
    						<tr>
    							<th>Table</th>
    							<th>ROWS</th>
    							<th>ARE</th>
    							<th>COOOOL</th>
    						</tr>
    					</thead>
    					<tbody>
    						<tr>
    							<td>BOO</td>
    							<td>words</td>
    							<td>for</td>
    							<td>TABLE</td>
    						</tr>
    
    						<tr>
    							<td>Yay words</td>
    							<td>Yay words</td>
    							<td>Yay words</td>
    							<td>Yay words</td>
    						</tr>
    						<tr>
    							<td>table data</td>
    							<td>table data</td>
    							<td>table data</td>
    							<td>table data</td>
    						</tr>
    
    					</tbody>
    				</table>
    
    			</div>
    
    			<div class="col">
    				<form>
    					<div class="form-group">
    						<label for="exampleInputEmail1">Email address</label>
    						<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    						<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    					</div>
    					<div class="form-group">
    						<label for="exampleInputPassword1">Password</label>
    						<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    					</div>
    					<div class="form-group form-check">
    						<input type="checkbox" class="form-check-input" id="exampleCheck1">
    						<label class="form-check-label" for="exampleCheck1">Check me out</label>
    					</div>
    					<button type="submit" class="btn btn-primary">Submit</button>
    				</form>
    
    			</div>
    		</div>
    	</div>
    
    	<div class="formcontain">
    		<form>
    			<div class="form-group" >
    				<label for="exampleInputEmail1">Email address</label>
    				<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    				<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    			</div>
    			<div class="form-group">
    				<label for="exampleInputPassword1">Password</label>
    				<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    			</div>
    			<div class="form-group form-check">
    				<input type="checkbox" class="form-check-input" id="exampleCheck1">
    				<label class="form-check-label" for="exampleCheck1">Check me out</label>
    			</div>
    			<button type="submit" class="btn btn-primary">Submit</button>
    		</form>
    	</div>
    
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    	<hr>
    
    	<h1>This is an H1 line.</h1>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
    
    </body>
    </html>
© www.soinside.com 2019 - 2024. All rights reserved.