Boostrap 4中的可扩展列表
Boostrap 4中的可扩展列表
提问于 2017-11-20 20:11:32
我有一个可扩展的列表在Bootrap 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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-25 16:02:06
如果其他人需要它，这是可行的：-
<!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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47400245
复制相关文章
相似问题
腾讯云开发者
