當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页

發(fā)布時(shí)間：2024/1/8 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

問題原因

解決方案

順便記錄一下使用

效果圖

HTML

CSS

問題原因

兩個(gè)js文件沖突/沒有引入指定的js文件

我們不能同時(shí)引入這兩個(gè)js只能引入其一，同時(shí)引入會(huì)使得部分功能失效

解決方案

注意我們使用下拉菜單時(shí)使用的js是這個(gè)

bootstrap.bundle.js

并不是

bootstrap.js

如圖是正確的使用

順便記錄一下使用

效果圖

下圖提現(xiàn)了響應(yīng)式

HTML

文件名 index.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../js/jquery-3.5.1.js"></script><link rel="stylesheet" href="../bootstrap/css/bootstrap.css"><script src="../bootstrap/js/bootstrap.bundle.js"></script><link rel="stylesheet" href="../css/index.css"></head> <body> <img class="img_" src="../res/img/blog.jpg" alt="未加載."> <div><nav class="navbar navbar-expand-lg navbar-light bg-dark "><a class="navbar-brand text-white-50 offset-1 " href="#">TMY Bolg</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon bg-success"></span></button><div class="collapse navbar-collapse ml-5" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item ml-4"><a class="nav-link text-white-50 " href="#">我的首頁(yè)</a></li><li class="nav-item ml-4"><a class="nav-link text-white-50" href="#">賬號(hào)管理</a></li><li class="nav-item dropdown ml-4"><a class="nav-link dropdown-toggle text-white-50" href="#" id="navbarDropdown" role="button"data-toggle="dropdown" aria-expanded="false">賬號(hào)管理</a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">修羅</a><a class="dropdown-item" href="#">無(wú)極</a><a class="dropdown-item" href="#">魁拔</a></div></li></ul><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="關(guān)鍵字" aria-label="Search"><button class="btn btn-outline-success bg-light text-dark my-2 my-sm-0" type="submit">搜索</button></form></div></nav> </div>  <div class="container-fluid bg-light fixed-bottom row h-75 position-absolute" id="contentid"> <div class="col-sm mt-4"> <div class="d-flex flex-column"> <img class="logo img-thumbnail float-left ml-auto mr-auto" src="../res/img/Java-Logo.jpg"><h2 class="text-dark w-100 text-center">purus molestie</h2><span class="text-dark w-75 text-center ml-auto mr-auto mt-2 mb-2"> Turpis inceptos, neque vel dolor.Mauris laoreet.Purus etorci in sollicitudin,acm quam,iaculis lacus. </span><button class="btn border-dark w-25 ml-auto mr-auto">訪問<span STYLE="font-size: 8px">>></span></button></div></div><div class="col-sm mt-4"><div class="d-flex flex-column bd-highlight"><img class="logo img-thumbnail ml-auto mr-auto" src="../res/img/Java-Logo.jpg"><h2 class="text-dark w-100 text-center">nullam molestie</h2><span class="text-dark w-75 ml-auto mr-auto text-center mt-2 mb-2">Turpis inceptos,neque vel dolor. Mauris laoreet, Purus et.orci in sollicitudin. </span><button class="btn border-dark w-25 ml-auto mr-auto mt-4">訪問<span STYLE="font-size: 8px">>></span></button></div></div> </div></body></html>

CSS

文件名index.css

.img_{position:absolute;height: 100%;width: 100%;/*設(shè)置在最底層*/z-index: -2;background: rgba(255,255,255,0.1); } .logo{width: 200px;height: 200px;border-radius: 200px; } .container-fluid{padding-left: 0;padding-right: 0;margin-left: 0;margin-right: 0;margin-top: 60px; } #contentid{z-index: -1; }

總結(jié)

以上是生活随笔為你收集整理的Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：如何做好虾皮跨境电商？关于Shopee店
下一篇： 2017年html5行业报告,云适配发布

HTML

Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页

問題原因

解決方案

順便記錄一下使用

效果圖

HTML

CSS

目錄

總結(jié)