堆栈内存溢出
  简体   繁体   English

Bootstrap折叠，手风琴向侧面而不是下方打开

[英]Bootstrap collapse and accordion opens to side, not underneath

 原文  2019-02-22 12:20:57  3   1    html/ bootstrap-4

问题描述

I want to use Bootstrap collapse but I want to keep my div-s with the content beneath each link, mainly because that's how i need it to work on mobile (the menu is a column and that the content opens under each link). 我想使用Bootstrap折叠，但我希望将div-s的内容保留在每个链接下，主要是因为这是我需要它在移动设备上工作的方式（菜单为一列，内容在每个链接下打开）。 Unfortunately, on website I have the links in a row, and the content doesn't open under the menu row of links, but to the side of each link. 不幸的是，在网站上我有连续的链接，并且内容不在菜单的链接行下打开，而是在每个链接的侧面打开。 I don't want this to happen. 我不希望这种情况发生。 Is there a way to keep my mark-up like this but to make the collapsed content open under the row of links? 有没有办法像这样保持我的标记，但使折叠的内容在链接行下打开？ 

 <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

Use the following code- 使用以下代码- 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Bootstrap 崩溃，手风琴不起作用 - Bootstrap collapse with accordion not working Bootstrap 3：折叠手风琴无法正常工作 - Bootstrap 3 : Collapse Accordion Not Working 当另一个手风琴面板打开时折叠手风琴面板 - Collapse accordion panel when another one opens bootstrap 4 collapse 打开同一张卡片 - bootstrap 4 collapse opens the same card Bootstrap Collapse在两个方向上均打开 - Bootstrap Collapse opens in both directons Bootstrap手风琴使用th：block折叠 - Bootstrap accordion collapse with th:block Bootstrap手风琴如何使两个手风琴崩溃 - How to have two accordion collapse with bootstrap accordion Bootstrap Collapse Accordion Hover 不一致 - Bootstrap Collapse Accordion Hover is not consistent 手风琴 angularjs 使用引导折叠 - Accordion angularjs using bootstrap collapse Twitter Bootstrap手风琴折叠功能 - Twitter bootstrap accordion collapse function
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM