在下面的代码中，即使在使用“崩溃”类之后，部门＃content1最初也会被折叠。我该怎么做才能最初显示Column1的内容？ 注意：我不想使用任何javascript函数来处理此任务
<!DOCTYPE HTML>
<html>
<head>
<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 class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">
<h1> <a href="#content1" data-toggle="collapse"> Column1 </a></h1>
<div id="content1" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-8 col-xs-12">
<a href="#content2" data-toggle="collapse"><h1> Column2 </h1> </a>
<div id="content2" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<a href="#content3" data-toggle="collapse"><h1> Column3 </h1> </a>
<div class="collapse" id="content3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
</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.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>
答案 0 :(得分：1)
.in用于bootstrap 3（https://getbootstrap.com/docs/3.3/javascript/#collapse）。在引导程序4中，它现在是.show（https://v4-alpha.getbootstrap.com/components/collapse/#example）。
所以你需要将类.show添加到div：
<!DOCTYPE HTML>
<html>
<head>
<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 class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">
<h1> <a href="#content1" data-toggle="collapse"> Column1 </a></h1>
<div id="content1" class="collapse in **show**">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-8 col-xs-12">
<a href="#content2" data-toggle="collapse"><h1> Column2 </h1> </a>
<div id="content2" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<a href="#content3" data-toggle="collapse"><h1> Column3 </h1> </a>
<div class="collapse" id="content3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
</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.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>