时间戳

首页 > 解决方案 > Bootstrap 折叠和手风琴向侧面打开，而不是在下面

html - Bootstrap 折叠和手风琴向侧面打开，而不是在下面

问题描述

我想使用 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>

标签： htmlbootstrap-4

解决方案

使用以下代码 -

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

推荐阅读