我不知道我的代码有什么问题，但由于某种原因，我无法在我的一个标签部分中加载引导面板样式。我设法在我的“公告”标签部分正确加载它，但是面板在我的“通知”部分中没有正确显示，即使我对它应用了完全相同的代码。这是我正在开发的网站的链接：
https://mpw-web.herokuapp.com/
以下是该页面的代码：
<h3>Announcements & Notifications</h3>
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"><strong>Announcements</strong></a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><strong>Notifications</strong><span class="badge">3</span></a></li>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">Public Holiday<span class="label label-warning">New!</span></h4>
</div>
<div class="panel-body">
<p>There will be a public holiday on 5/5/2015</p>
<h6> Date: 4/15/2015</h6>
</div>
<div class="panel-heading">
<h4 class="panel-title">Project X Delayed</h4>
</div>
<div class="panel-body">
<p>Project x has been delayed due to (place reason here)</p>
<h6> Date: 4/8/2015</h6>
</div>
<div class="panel-heading">
<h4 class="panel-title">Project X new Phase</h4>
</div>
<div class="panel-body">
<p>Project has moved to phase 3 after successful review of phase 2.</p>
<h6> Date: 4/2/2015</h6>
</div>
<div class="panel-heading">
<h4 class="panel-title">New Workshops!</h4>
</div>
<div class="panel-body">
<p>The following new workshops have been introduces: <br><br>
- Basic Photoshop (7/6/2015) <br>
- Interior Design 101 (6/6/2015) <br>
- Awsome Workshop no.300 (25/8/2015) <br><br>
if interested, please contact employee x for registration
</p>
<h6> Date: 3/34/2015</h6>
</div>
<div class="panel-heading">
<h4 class="panel-title">Public Holiday</h4>
</div>
<div class="panel-body">
<p>There will be a public holiday on 5/5/2015</p>
<h6> Date: 4/15/2015</h6>
</div>
<div class="panel-heading">
<h4 class="panel-title">Project X Delayed</h4>
</div>
<div class="panel-body">
<p>Project x has been delayed due to (place reason here)</p>
<h6> Date: 4/8/2015</h6>
</div>
<div class="panel-heading">
<h4 class="panel-title">Project X new Phase</h4>
</div>
<div class="panel-body">
<p>Project has moved to phase 3 after successful review of phase 2</p>
<h6> Date: 4/2/2015</h6>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">Vacation Replacement Request</h4>
<div>
<div class="panel-body">
<p>Employee X has requested you as his/her replacement while on vacation from <strong>12/7/2015</strong> to <strong>12/8/2015</strong></p>
<a href="#"><button type="button" class="btn btn-primary btn-sm">Accept</button></a>
<a href="#"><button type="button" class="btn btn-danger btn-sm">Decline</button></a>
<h6> Date: 4/15/2015</h6>
</div>
<div class="panel-heading">
<h4 class="panel-title">New Project Invitation</h4>
</div>
<div class="panel-body">
<p>You have been invited by employee Y to join Project X</p>
<a href="#"><button type="button" class="btn btn-primary btn-sm">Accept</button></a>
<a href="#"><button type="button" class="btn btn-danger btn-sm">Decline</button></a>
<h6> Date: 4/8/2015</h6>
</div>
<div class="panel-heading">
<h4 class="panel-title">Job Request</h4>
</div>
<div class="panel-body">
<p>You have been requested to perform the following task:<br><br>
- <strong>Task:</strong> Site Visit<br>
- <strong>Project:</strong> X<br>
- <strong>Location:</strong> Kuwait City<br>
- <strong>Time:</strong> 10 am<br><br>
Please contact <a href="#">Employee X</a> for further information.
</p>
<h6> Date: 4/2/2015</h6>
</div>
</div>
</div>
</div>
提前感谢您的帮助！
答案 0 :(得分：0)
bootstrap没有问题。您的HTML结构存在问题。您已正确打开/关闭div。 以下是tabpanel的正确HTML结构：
<div role="tabpanel" class="tab-pane fade active in" id="profile">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">Vacation Replacement Request</h4>
</div>
<div class="panel-body">
<p>Employee X has requested you as his/her replacement while on vacation from <strong>12/7/2015</strong> to <strong>12/8/2015</strong></p>
<a href="#"><button type="button" class="btn btn-primary btn-sm">Accept</button></a>
<a href="#"><button type="button" class="btn btn-danger btn-sm">Decline</button></a>
<h6> Date: 4/15/2015</h6>
</div>
<div class="panel-heading">
<h4 class="panel-title">New Project Invitation</h4>
</div>
<div class="panel-body">
<p>You have been invited by employee Y to join Project X</p>
<a href="#"><button type="button" class="btn btn-primary btn-sm">Accept</button></a>
<a href="#"><button type="button" class="btn btn-danger btn-sm">Decline</button></a>
<h6> Date: 4/8/2015</h6>
</div>
<div class="panel-heading">
<h4 class="panel-title">Job Request</h4>
</div>
<div class="panel-body">
<p>You have been requested to perform the following task:<br><br>
- <strong>Task:</strong> Site Visit<br>
- <strong>Project:</strong> X<br>
- <strong>Location:</strong> Kuwait City<br>
- <strong>Time:</strong> 10 am<br><br>
Please contact <a href="#">Employee X</a> for further information.
</p>
<h6> Date: 4/2/2015</h6>
</div>
</div>
</div>