【发布时间】：2018-06-17 15:34:40
【问题描述】：
我最近开始研究 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>
【问题讨论】：
-
我看到的最大问题是您使用的是 Bootstrap 4 语法（flexbox 对齐，
.col-sm没有数字后缀），但您包含 Bootstrap 3... -
您希望三个手风琴垂直或水平对齐？
-
我希望它们水平对齐。
标签： twitter-bootstrap alignment row accordion