我最近开始关注BootStrap，我正在尝试创建一些东西，表面上看起来非常简单，尽管我很难理解它。
我试图在一行内显示三个手风琴控件。我还希望将三支手风琴与页面中心对齐。
目前，我的所有三个手风琴控制器都在他们自己的排上开始，第一个手风琴位于页面的左上角。我已经尝试了十几种不同的东西来实现我的目标，但我只是让事情变得更糟，所以我尽可能地清理代码在这里提出来。
我的代码有什么问题？
非常感谢。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.container-fluid {
align-items:center;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm">
<!--Start of First Accordian-->
<div id="accordion" class="panel-group" style="width:33%">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Placeholder Badge/Icon</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<b>IT Department Team Site</b>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Description</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Working Team Site for the IT Dept.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Owner(s)</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
For access/issues, please contact:<br />
<a href="">Sam</a><br />
<a href="">Chris</a><br />
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<!--Start of Second Accordian-->
<div id="accordion2" class="panel-group" style="width:33%">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2">Placeholder Badge/Icon</a>
</h4>
</div>
<div id="collapseOne2" class="panel-collapse collapse in">
<div class="panel-body">
<b>IT Department Project Site</b>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo2">Placeholder Badge/Icon</a>
</h4>
</div>
<div id="collapseTwo2" class="panel-collapse collapse">
<div class="panel-body">
Project Name Team Site for the IT Dept.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree2">Owner(s)</a>
</h4>
</div>
<div id="collapseThree2" class="panel-collapse collapse">
<div class="panel-body">
For access/issues, please contact:<br />
<a href="">Sam</a><br />
<a href="">Chris</a><br />
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<!--Start of Third Accordian-->
<div id="accordion3" class="panel-group" style="width:33%">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion3" href="#collapseOne3">Placeholder Badge/Icon</a>
</h4>
</div>
<div id="collapseOne3" class="panel-collapse collapse in">
<div class="panel-body">
<b>Finance Department Team Site</b>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion3" href="#collapseTwo3">Description</a>
</h4>
</div>
<div id="collapseTwo3" class="panel-collapse collapse">
<div class="panel-body">
Working Team Site for the Finance Dept.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion3" href="#collapseThree3">Owner(s)</a>
</h4>
</div>
<div id="collapseThree3" class="panel-collapse collapse">
<div class="panel-body">
For access/issues, please contact:<br />
<a href="">Sam</a><br />
<a href="">Chris</a><br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
Bootstrap使用具有12列的网格系统。在这里，您必须将col-sm替换为col-sm-<insert number>。
最佳选择是col-sm-4，因为你有3个手风琴。 （3 * 4 = 12）所以你可以拿整个页面，但它取决于你。有关更多信息，我邀请您搜索有关Bootstrap的更多信息。
此外，您可能需要检索style="width:33%"，因为它会减少手风琴在页面上可以占用的位置。测试一下，看看。