Question

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

Answer 1

使用以下代码-

    First name | Last name | Address
0     John         Doe        ABC 9
1     John         Doe        KFT 2
2     Michael      John       ABC 9
3     Mary         Jane       PEP 9/2
4     Gary         Young      verylongstreetname 1

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

1 个答案: