Erweiterbare Liste in Boostrap 4

Ich habe eine erweiterbare Liste in Bootrap 4, die in Ordnung funktioniert, außer dass andere Elemente nicht zusammenfallen, wenn eine erweitert wird. Habe ich etwas übersehen oder ist das mit Listengruppen nicht möglich? Das Beispiel shown mit Karten funktioniert gut.Erweiterbare Liste in Boostrap 4

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Lorem Ipsum</title><!-- Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
</head> 
<body> 
<div id="container"> 
    <div id="accordion" role="tablist" aria-multiselectable="false"> 
     <ul class="list-group"> 
      <li role="tab" class="list-group-item" id="heading0"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="false" aria-controls="collapse0" class="collapsed">1. List Group Item</a> 
       <div id="collapse0" class="collapse" role="tabpanel" aria-labelledby="heading0"> 
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar lorem quam, at commodo lorem dapibus sit amet. Etiam luctus varius lacus, eget rutrum massa egestas lacinia. Integer quis odio quis magna congue placerat. Cras sed venenatis orci. In velit quam, faucibus ac pharetra a, condimentum sed mi. Mauris nec sapien tincidunt, elementum lacus eget, auctor diam. Nunc vel posuere purus. Nullam accumsan non dolor nec congue. Nulla sagittis volutpat aliquam. </p> 
       </div> 
      </li> 

      <li role="tab" class="list-group-item" id="headingOne"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">2. List Group Item</a> 
       <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne"> 

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar lorem quam, at commodo lorem dapibus sit amet. Etiam luctus varius lacus, eget rutrum massa egestas lacinia. Integer quis odio quis magna congue placerat. Cras sed venenatis orci. In velit quam, faucibus ac pharetra a, condimentum sed mi. Mauris nec sapien tincidunt, elementum lacus eget, auctor diam. Nunc vel posuere purus. Nullam accumsan non dolor nec congue. Nulla sagittis volutpat aliquam. </p> 
       </div> 
      </li> 

      <li class="list-group-item" role="tab" id="headingTwo"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="collapsed">3. List Group Item</a> 
       <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar lorem quam, at commodo lorem dapibus sit amet. Etiam luctus varius lacus, eget rutrum massa egestas lacinia. Integer quis odio quis magna congue placerat. Cras sed venenatis orci. In velit quam, faucibus ac pharetra a, condimentum sed mi. Mauris nec sapien tincidunt, elementum lacus eget, auctor diam. Nunc vel posuere purus. Nullam accumsan non dolor nec congue. Nulla sagittis volutpat aliquam. </p> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</body> 
</html>

Quelle

2017-11-20 Himanshu

Hallo, geben Sie bitte eine [MCVE]. Ich sehe in diesem Code-Snippet keinen Bootstrap. – TylerH

Entschuldigung, nur einen Moment. – Himanshu

Haben Sie versucht, die Bootstrap 4s Beta-Version sowie den Code für den Akkordeon-Effekt w/'collapse' zu verwenden: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example –

Dies funktioniert, wenn jemand anderes es braucht: -

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Lorem Ipsum</title><!-- Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 

</head> 
<body> 
<div id="container"> 
    <div id="accordion" role="tablist" aria-multiselectable="false"> 
     <ul class="list-group"> 
      <li role="tab" class="list-group-item" id="heading0" data-toggle="collapse" data-parent="#accordion" data-target="#collapse0" aria-expanded="false" aria-controls="collapse0" class="collapsed"> 1. List Group Item </li> 
       <div id="collapse0" class="collapse" role="tabpanel" aria-labelledby="heading0"> 
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar lorem quam, at commodo lorem dapibus sit amet. Etiam luctus varius lacus, eget rutrum massa egestas lacinia. Integer quis odio quis magna congue placerat. Cras sed venenatis orci. In velit quam, faucibus ac pharetra a, condimentum sed mi. Mauris nec sapien tincidunt, elementum lacus eget, auctor diam. Nunc vel posuere purus. Nullam accumsan non dolor nec congue. Nulla sagittis volutpat aliquam. </p> 
       </div> 


      <li role="tab" class="list-group-item" id="headingOne" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">2. List Group Item</li> 
       <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne"> 

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar lorem quam, at commodo lorem dapibus sit amet. Etiam luctus varius lacus, eget rutrum massa egestas lacinia. Integer quis odio quis magna congue placerat. Cras sed venenatis orci. In velit quam, faucibus ac pharetra a, condimentum sed mi. Mauris nec sapien tincidunt, elementum lacus eget, auctor diam. Nunc vel posuere purus. Nullam accumsan non dolor nec congue. Nulla sagittis volutpat aliquam. </p> 
       </div> 


      <li class="list-group-item" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="collapsed">3. List Group Item</li> 
       <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar lorem quam, at commodo lorem dapibus sit amet. Etiam luctus varius lacus, eget rutrum massa egestas lacinia. Integer quis odio quis magna congue placerat. Cras sed venenatis orci. In velit quam, faucibus ac pharetra a, condimentum sed mi. Mauris nec sapien tincidunt, elementum lacus eget, auctor diam. Nunc vel posuere purus. Nullam accumsan non dolor nec congue. Nulla sagittis volutpat aliquam. </p> 
       </div> 

     </ul> 
    </div> 
</div> 
<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.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
</body> 
</html>

Quelle

2017-11-25 16:02:06 Himanshu

Erweiterbare Liste in Boostrap 4

Antwort

Verwandte Themen