Question

我在Bootrap 4中有一个可扩展的列表可以正常工作，除了其他项目在扩展时不会崩溃。我错过了什么，或者列表组不可能。使用卡片的示例shown工作正常。

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

Answer 1

如果其他人需要它，这是有效的： -

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

Boostrap 4中的可扩展列表

1 个答案: