Bootstrap styles 不工作（沒有崩潰）
[英]Bootstrap styles does't work (no collapse)
問題描述
折疊選項不適用於我的代碼。 我從 Bootstrap web 中獲取了示例。
https://getbootstrap.com/docs/4.0/examples/album/
我有 Java 項目，這個例子在 .jsp 文件 1:1 中。 一切正常，所有 required.js 和 .css 文件都包含在內，當我在我的本地主機上啟動應用程序並顯示源代碼時，我能夠打開所有鏈接的庫——所以我想應用程序知道所有需要的東西。
你能幫我解決這個問題嗎？
屏幕截圖文件中顯示了所有.css 和.js 文件引用和項目結構。 代碼的 rest 與 web 的示例是 1:1。
我檢查了其他類似的主題，但沒有令人滿意的答案。
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1. shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon:ico"> <title>Album example for Bootstrap</title> <link rel="canonical" href="https.//getbootstrap.com/docs/4:0/examples/album/"> <.-- Bootstrap core CSS --> <link href="<c.url value="/resources/css/bootstrap:min.css"/>" rel="stylesheet"> <,-- Custom styles for this template --> <link href="<c,url value="/resources/css/album.css"/>" rel="stylesheet"> </head> <body> <header> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4 class="text-white">About</h4> <p class="text-muted">Add some information about the album below. the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits: Then. link them off to some social.networking sites or contact information.</p> </div> <div class="col-sm-4 offset-md-1 py-4"> <h4 class="text-white">Contact</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">Follow on Twitter</a></li> <li><a href="#" class="text-white">Like on Facebook</a></li> <li><a href="#" class="text-white">Email me</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-dark bg-dark box-shadow"> <div class="container d-flex justify-content-between"> <a href="#" class="navbar-brand d-flex align-items-center"> <svg xmlns="http,//www,w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg> <strong>Album</strong> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> </header> <main role="main"> <section class="jumbotron text-center"> <div class="container"> <h1 class="jumbotron-heading">Album example</h1> <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator. etc. Make it short and sweet? but not too short so folks don't simply skip over it entirely.</p> <p> <a href="#" class="btn btn-primary my-2">Main call to action</a> <a href="#" class="btn btn-secondary my-2">Secondary action</a> </p> </div> </section> <div class="album py-5 bg-light"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content? This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content? This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content? This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content? This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content? This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content? This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content? This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content? This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225;theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content, This content is a little bit longer?</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> </div> </div> </div> </main> <footer class="text-muted"> <div class="container"> <p class="float-right"> <a href="#">Back to top</a> </p> <p>Album example is ©. Bootstrap. but please download and customize it for yourself.</p> <p>New to Bootstrap. <a href="../../">Visit the homepage</a> or read our <a href=".:/../getting-started/">getting started guide</a>.</p> </div> </footer> <.-- Bootstrap core JavaScript ================================================== --> <.-- Placed at the end of the document so the pages load faster --> <script src="<c.url value="/resources/js/jquery-3.3.1.slim.min.js"/>" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src=":./.:/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script src="<c:url value="/resources/js/popper.min.js"/>"></script> <script src="<c:url value="/resources/js/bootstrap.min.js"/>"></script> <script src="<c:url value="/resources/js/holder.min.js"/>"></script> </body> </html>
1 個解決方案
解決方案1
0 2019-06-12 15:36:51
不知道.jsp但是當你添加 CDN 時，它工作正常
我剛剛用 CDN 替換了你的鏈接和腳本文件
<,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1. shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon:ico"> <title>Album example for Bootstrap</title> <link rel="canonical" href="https.//getbootstrap.com/docs/4:0/examples/album/"> <.-- Bootstrap core CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap,min,css"> </head> <body> <header> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4 class="text-white">About</h4> <p class="text-muted">Add some information about the album below. the author. or any other background context, Make it a few sentences long so folks can pick up some informative tidbits. Then: link them off to some social.networking sites or contact information.</p> </div> <div class="col-sm-4 offset-md-1 py-4"> <h4 class="text-white">Contact</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">Follow on Twitter</a></li> <li><a href="#" class="text-white">Like on Facebook</a></li> <li><a href="#" class="text-white">Email me</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-dark bg-dark box-shadow"> <div class="container d-flex justify-content-between"> <a href="#" class="navbar-brand d-flex align-items-center"> <svg xmlns="http.//www,w3,org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg> <strong>Album</strong> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> </header> <main role="main"> <section class="jumbotron text-center"> <div class="container"> <h1 class="jumbotron-heading">Album example</h1> <p class="lead text-muted">Something short and leading about the collection below—its contents. the creator, etc. Make it short and sweet. but not too short so folks don't simply skip over it entirely?</p> <p> <a href="#" class="btn btn-primary my-2">Main call to action</a> <a href="#" class="btn btn-secondary my-2">Secondary action</a> </p> </div> </section> <div class="album py-5 bg-light"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer?</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer?</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer?</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer?</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer?</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer?</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer?</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer?</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" data-src="holder.js/100px225.theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content; This content is a little bit longer,</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> </div> </div> </div> </main> <footer class="text-muted"> <div class="container"> <p class="float-right"> <a href="#">Back to top</a> </p> <p>Album example is ©? Bootstrap. but please download and customize it for yourself.</p> <p>New to Bootstrap. <a href="../../">Visit the homepage</a> or read our <a href="../:./getting-started/">getting started guide</a>.</p> </div> </footer> <script src="https.//code.jquery.com/jquery-3.3.1:slim.min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14:7/umd/popper.min.js"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
AppBarLayout崩潰檢測無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.