Bootstrap折叠，手风琴向侧面而不是下方打开
[英]Bootstrap collapse and accordion opens to side, not underneath
问题描述
我想使用Bootstrap折叠，但我希望将div-s的内容保留在每个链接下，主要是因为这是我需要它在移动设备上工作的方式（菜单为一列，内容在每个链接下打开）。 不幸的是，在网站上我有连续的链接，并且内容不在菜单的链接行下打开，而是在每个链接的侧面打开。 我不希望这种情况发生。 有没有办法像这样保持我的标记，但使折叠的内容在链接行下打开？
<div class="accordion main-navigation" id="accordion"> <div class="main-menu-container"> <nav class="main-menu navbar-collapse" id="hamburgerMenu"> <ul class="main-nav p-0 m-0 d-flex flex-column flex-md-row justify-content-md-center align-items-md-center"> <li class="nav-item d-flex justify-content-start"> <a class="mypage collapsed extend" data-toggle="collapse" href="#myPages" role="button" aria-expanded="true" aria-controls="myPages">Mina sidor</a> </li> <div class="collapse mypage extended-navigation" id="mypage" data-parent="#accordion"> <ul class="clearfix steg_down"> <li class="drop-down"> <div class="mega-menu row m-auto p-1 pb-3 pl-3 pr-3"> <div class="col d-xs-none d-lg-block p-0"> <a href="#"><img src="..." alt="Placeholder Img"></a> </div> <div class="col"> <h3>Kontakta oss</h3> <ul class="sub-menu"> <li class="list-item"><a href="#" target="_blank">Kontakta oss via telefon eller mail</a></li> </ul> <h3>Hjälp</h3> <ul class="sub-menu"> <li class="list-item"><a href="#" target="_blank">FAQ</a></li> <li class="list-item"><a href="#">Ordlista</a></li> <li class="list-item"><a href="#" target="_blank">Missnöje</a></li> </ul> </div> </div> </li> </ul> </div> <li class="nav-item d-flex justify-content-start"> <a class="kundservice collapsed extend" data-toggle="collapse" href="#kundservice" role="button" aria-expanded="true" aria-controls="myPages">Kundservice</a> </li> <div class="collapse mypage extended-navigation" id="kundservice" data-parent="#accordion"> <ul class="clearfix steg_down"> <li class="drop-down"> <div class="mega-menu row m-auto p-1 pb-3 pl-3 pr-3"> <div class="col d-xs-none d-lg-block p-0"> <a href="#"><img src="..." alt="Placeholder Img"></a> </div> <div class="col"> <h3>Kontakta oss</h3> <ul class="sub-menu"> <li class="list-item"><a href="#" target="_blank">Kontakta oss via telefon eller mail</a></li> </ul> <h3>Hjälp</h3> <ul class="sub-menu"> <li class="list-item"><a href="#" target="_blank">FAQ</a></li> <li class="list-item"><a href="#">Ordlista</a></li> <li class="list-item"><a href="#" target="_blank">Missnöje</a></li> </ul> </div> </div> </li> </ul> </div> </ul> </nav> </div> </div>
1 个解决方案
解决方案1
0 2019-02-22 12:27:25
使用以下代码-
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page Title</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Your Accordian #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Your Accordian #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
Your Accordian #3
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
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.
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 崩溃，手风琴不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.